Делает ли «Javascript на дне» цель цели документа.

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

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

Есть ли счастливая среда, возможно?

26 голосов | спросил DisgruntledGoat 15 J000000Thursday10 2010, 14:58:30

4 ответа


30

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

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

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

ответил Callan 15 J000000Thursday10 2010, 16:50:04
6

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

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

ответил Macha 15 J000000Thursday10 2010, 19:08:11
3

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

Поместите скрипты в нижней части страницы (перед тегом </body> ), чтобы быстро и быстро получить ваш HTML и CSS. Браузер сможет сделать страницу намного быстрее, а затем скрипты могут быть загружены, а не оставить пустую страницу для просмотра пользователем, пока они ждут загрузки скриптов.

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

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

Примечание: Для таблиц стилей противоположное значение - Таблицы стилей в нижней части блока страниц прогрессивного рендеринга, пока не будут загружены все таблицы стилей и перемещение их в документ HEAD устраняет проблема.


Для загрузки javascript не требуется аккуратный трюк, чтобы пользователь не мог ждать, вы можете создать элемент <script /& gt; , используя DOM createElement () и добавьте его на страницу перед закрывающим тегом </body> :

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

Браузер не запускает загрузку js-скрипта до тех пор, пока новый элемент <script /& gt; не будет добавлен на страницу. После завершения загрузки браузер интерпретирует код Javascript, содержащийся внутри.

ответил Tom 16 J000000Friday10 2010, 21:02:40
1

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

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

ответил Kornel 17 J000000Saturday10 2010, 16:33:32

Похожие вопросы

Популярные теги

security × 330linux × 316macos × 2827 × 268performance × 244command-line × 241sql-server × 235joomla-3.x × 222java × 189c++ × 186windows × 180cisco × 168bash × 158c# × 142gmail × 139arduino-uno × 139javascript × 134ssh × 133seo × 132mysql × 132