Чи "розміщення Javascript внизу" перешкоджає меті document.ready?

26

Я знаю, що рекомендується розміщувати Javascript внизу сторінки, але якщо я використовую jQuery, це не поразка, його мета запуститись, коли DOM завантажується?

Наприклад, якщо у мене є спадне меню, наприклад, спадні меню не відображатимуться, поки не буде завантажена вся решта сторінки. Я також намагаюся розвиватися з прогресивним вдосконаленням, тому у мене можуть бути елементи, які приховані за допомогою jQuery замість CSS (тому не-JS користувачі можуть їх бачити).

Можливо, є щасливий засіб?

javascript performance jquery

— Невдоволений козак
джерело

У мене виникає зворотна проблема. У мене є сценарій, який створює і розміщує бічну панель, але, на жаль, сторінка надається до запуску мого сценарію, що призводить до непривабливого ривка, оскільки елементи сторінки перерисовуються в нових місцях. Чи можна заблокувати візуалізацію, поки не буде виконано мій сценарій, або іншим чином мої розміри та позиції запустяться до першого візуалізації?

3

Чи не належить це питання більше до StackOverflow?

— Марко Демайо

30

Документ вже чекає завантаження DOM перед запуском JavaScript (http://www.learningjquery.com/2006/09/introducing-document-ready).

Ідея розмістити його внизу означає, що якщо у вашого JS виникають проблеми або у людини повільний зв’язок, решта сторінки все-таки завантажується спочатку і не "зависає".

JS все ще працює, коли все завантажено, будь то на старті чи на фініші.

— Каллан
джерело

6

Якщо розмістити javascript внизу, це означає, що інший вміст сторінки (особливо текст) завантажується перед javascript, тому користувачі не чекають завантаження JS, якщо вони мають повільне з'єднання.

Це не впливає на document.ready, як це називається, коли браузер закінчує підготовку DOM до сторінки. У будь-якому випадку все ще потрібно спочатку завантажити.

— Мача
джерело

3

Сценарій фактично не використовується, поки HTML не закінчиться завантаження - скрипт не може змінити DOM, поки HTML не завантажиться. document.readyчекає, коли DOM завантажиться. Отже, немає сенсу зберігати такі важливі речі, як таблиці стилів.

Розташуйте сценарії внизу сторінки (перед </body>тегом), щоб замовити HTML та CSS користувачеві якнайшвидше. Веб-переглядач зможе візуалізувати сторінку набагато швидше, і тоді сценарії можна буде завантажувати, а не залишати порожню сторінку, щоб користувач дивився на час очікування завантаження скриптів.

Поки браузер поступово відображає сторінку, якщо вона потрапляє на тег сценарію (тобто зовнішній файл Javascript), все зупиняється . Сценарії мають право на вихід - під час завантаження сценарію браузер не запускає жодного іншого завантаження. тобто зображення та таблиці стилів та будь-яке інше паралельне завантаження буде заблоковано, навіть на різних іменах хостів.

Недоліком розміщення скриптів у нижній частині сторінки є те, що через те, що сторінка буде відображатися до ініціалізації сценаріїв, особливо швидкі кліки зможуть взаємодіяти з вашим сайтом до того, як Javascript буде готовий.

Примітка: навпаки стосується таблиць стилів - таблиці стилів у нижній частині сторінки блокують прогресивне відображення до тих пір, поки не будуть завантажені всі таблиці стилів і переміщення їх до документа HEADусуне проблему.

Існує акуратний трюк, щоб завантажити javascript, не змушуючи користувача чекати, ви можете створити <script/>елемент за допомогою createElement()методу DOM і додати його на сторінку безпосередньо перед закриваючим </body>тегом:

var oScript = document.createElement("script");
oScript.src = "/path/to/my.js";
document.body.appendChild(oScript);

Браузер не починає завантажувати сценарій js, поки новий <script/>елемент фактично не буде доданий на сторінку. Після завершення завантаження браузер інтерпретує код Javascript, що міститься в ньому.

— Том
джерело

1

Не зовсім правда. Сценарій може змінити DOM до завантаження всіх HTML ... Насправді, тому скрипти блокуються, оскільки вони можуть змінювати сторінку. Однак, у багатьох випадках розробникам не потрібно додавати сценарій "поведінки" до завантаження DOM.

— сканліфф

1

Так. Якщо ви помістите сценарії внизу, doc.ready( DOMContentLoadedподія) більше не потрібна - ваш сценарій буде виконаний після того, як все-таки попереднє завантаження DOM все-таки буде завантажене.

Оскільки сценарії в кінці покращують продуктивність (розбір HTML та завантаження CSS та зображень скриптами не заблоковано), я рекомендую розміщувати сценарії внизу, а не використовувати doc.ready.

— Корнель
джерело