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

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

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

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

Document.ready ждет загрузки DOM, прежде чем запускать любой JavaScript (http://www.learningjquery.com/2006/09/introduction-document-ready).

Идея поместить его внизу означает, что если у вашего JS возникают проблемы или у пользователя медленное соединение, остальная часть страницы все равно загружается первой и не «зависает».

JS по-прежнему работает, когда все загружено, в начале или в конце.

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

Это не влияет на document.ready, так как он вызывается, когда браузер завершил подготовку DOM для страницы. В любом случае, все еще нужно сначала загрузить.

Сценарий фактически не используется до тех пор, пока 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, содержащийся в нем.

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

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