Почему JS-скрипты обычно помещаются в заголовок документа?
Почему JS-скрипты обычно помещаются в заголовок документа? Требуется ли это стандартами или это просто соглашение без особой причины?
3 ответа
Это просто соглашение. Обычно рекомендуется помещать скрипты в конец текста, чтобы страница могла отображаться перед их загрузкой, что всегда является плюсом. Также, document.body не может использоваться, пока документ не загружен или если вы не поместите скрипт в тело.
Смотрите http://developer.yahoo.com/performance/rules.html
Хотя прошлой практикой часто было размещать их в заголовке ради централизации сценариев и стилей (и т. П.), Сейчас целесообразно размещать сценарии внизу, чтобы повысить скорость загрузки остальной части страницы.
Цитировать:
Проблема, вызванная сценариями, заключается в том, что они блокируют параллельные загрузки. Спецификация HTTP/1.1 предполагает, что браузеры загружают не более двух компонентов параллельно для каждого имени хоста. Если вы обслуживаете свои изображения с нескольких имен хостов, вы можете получить более двух загрузок для одновременного выполнения. Однако во время загрузки скрипта браузер не будет запускать другие загрузки, даже на разных именах хостов.
В некоторых ситуациях нелегко переместить сценарии в конец. Если, например, скрипт использует document.write для вставки части содержимого страницы, его нельзя переместить ниже на странице. Также могут быть проблемы с областями видимости. Во многих случаях есть способы обойти эти ситуации.
Альтернативное предложение, которое часто возникает, - использовать отложенные сценарии. Атрибут DEFER указывает, что сценарий не содержит document.write и является подсказкой для браузеров, что они могут продолжить рендеринг. К сожалению, Firefox не поддерживает атрибут DEFER. В Internet Explorer сценарий может быть отложен, но не настолько, как хотелось бы. Если скрипт можно отложить, его также можно переместить в нижнюю часть страницы. Это заставит ваши веб-страницы загружаться быстрее.
<script src="url"></script>будет блокировать загрузку других компонентов страницы, пока скрипт не будет извлечен, скомпилирован и выполнен. Лучше вызывать сценарий как можно позже, чтобы загрузка изображений и других компонентов не задерживалась.
Это зависит от того, что делает скрипт. Если ваш код обернут в событие onLoad, то это не имеет значения, так как он вернется почти сразу, а не заблокируется, в противном случае вы должны поместить его туда, где он подходит, потому что размещение имеет значение.
Что касается того, чтобы поставить его в конце, это дает немного больше времени пользователю, чтобы начать смотреть на страницу. Просто задайте себе вопрос - работает ли мой сайт без JavaScript? Если это не так, то, на мой взгляд, не имеет значения, куда вы его поместили, поскольку код onLoad будет выполняться только после полной загрузки DOM (включая двоичный контент, такой как изображения). Если вы можете использовать его без JavaScript, поместите его в конец, чтобы изображения могли загружаться быстрее.
Также обратите внимание, что большинство библиотек JS используют специальный код, который работает с проблемой onLoad и использует для этого настраиваемое событие, которое запускается после загрузки DOM и не ожидает двоичных данных.
Теперь, когда я написал все это, у меня возник вопрос. Использует ли, скажем, JQuery's
$(document).ready(function () {});
и поместить тег script в конец страницы - это то же самое, что использовать событие onLoad и поместить его в начало? Это должно быть то же самое, потому что браузер будет загружать все изображения перед загрузкой скрипта, который является последним в списке. Если вы знаете ответ, оставьте комментарий (я слишком ленив, и уже слишком поздно, чтобы проверить его).