JavaScript внизу страницы?

Я читал, что лучше сохранить все ваши файлы JavaScript в нижней части веб-страницы. Шаблон HTML5 Boilerplate, похоже, согласен: http://html5boilerplate.com/

И, кажется, широко используется.

Мой вопрос: во-первых, имеет ли он какой-то реальный базис? Я провел тестирование в Firebug и, похоже, имеет небольшой эффект, но это тривиально? Изображения и другие источники, похоже, не загружаются, пока файлы CSS и файлы script не загрузились, но приклеить их снизу совсем не так.

Ответ 1

Это очень важно по соображениям лучшей практики.

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

Это связано с тем, что файлы JavaScript загружаются синхронно.

Также обратите внимание, что во время загрузки вы получите флэш файла без использования шрифта (FOUT), если вы не переместите ваши файлы JavaScript в нижней части страницы. Это связано с тем, что ваш CSS не будет загружаться до завершения загрузки script.


Вот выдержка из правила производительности Yahoo.

Вторая проблема, вызванная скриптами, - это блокирование параллельных загрузок. Спецификация HTTP/1.1 предполагает, что браузеры загружают не более двух компонентов параллельно по имени узла. Если вы обслуживаете свои изображения из нескольких имен хостов, вы можете получить более двух загрузок, которые будут происходить параллельно. (Я получил Internet Explorer для загрузки более 100 изображений параллельно.) Однако при загрузке script браузер не запускает никаких других загрузок даже на разных именах хостов.


Ссылки

http://developer.yahoo.com/performance/rules.html/

Особенно обратите внимание на правило 6.

Ответ 2

Недавно мы провели эту дискуссию в офисе. Я написал длинный пост, где я излагаю свое мнение по этому вопросу. Короткий ответ заключается в том, что это действительно зависит от того, что вы делаете. Для веб-страниц, ориентированных на контент, дно, похоже, работает лучше всего. Однако, когда вы создаете веб-приложения, где функциональность является основным приоритетом, размещение в верхней части имеет свои преимущества.

Ответ 3

JavaScripts загружается синхронно. Пара, которая обычно имеет больший размер файла, и у вас есть контент, который задерживается при загрузке из-за синхронной загрузки JavaScript. Если вы поместите JavaScripts в нижнюю часть страницы, сначала загрузится все остальное, и загрузка JavaScript не сможет заблокировать что-либо.

Ответ 4

В принципе, когда браузер попадает в тег <script>, он останавливает загрузку остальной части документа до тех пор, пока не будет загружен и не запущен <script>.