«Помещение Javascript внизу» побеждает цель document.ready?


26

Я знаю, что рекомендуется размещать Javascript внизу страницы, но если я использую jQuery, разве это не лишает его цели запускаться во время загрузки DOM?

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

Может быть, есть счастливая среда?


У меня обратная проблема. У меня есть скрипт, который создает и размещает боковую панель, но, к сожалению, страница отображается перед запуском моего скрипта, что приводит к неприглядному рывку, когда элементы страницы перерисовываются в новых местах. Можно ли заблокировать рендеринг до тех пор, пока мой скрипт не будет выполнен, или иным образом запустить мой размер и положение перед первым рендерингом?

3
Разве этот вопрос не относится больше к StackOverflow?
Марко Демайо

Ответы:


30

Document.ready ждет загрузки DOM, прежде чем запускать любой JavaScript (http://www.learningjquery.com/2006/09/introduction-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.
scunliffe

1

Да. Если вы поместите сценарии внизу, doc.ready( DOMContentLoadedсобытие) больше не требуется - ваш сценарий будет выполнен после загрузки всех предыдущих DOM.

Поскольку сценарии в конце повышают производительность (разбор HTML и загрузка CSS и изображений не блокируются сценариями), я рекомендую размещать сценарии внизу, а не использовать doc.ready.

Используя наш сайт, вы подтверждаете, что прочитали и поняли нашу Политику в отношении файлов cookie и Политику конфиденциальности.
Licensed under cc by-sa 3.0 with attribution required.