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

Question

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

20

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

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

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

Wolfe 03 авг. 2012, в 00:58

Источник

1

Большинство сценариев требуют загрузки DOM, что не гарантируется, если они находятся в верхней части страницы. Есть исключения из этого, хотя, по какой-то причине modenizer.js необходимо добавить в верхнюю часть страницы, поскольку он должен выполняться до полной загрузки DOM. Например, при использовании готового документа jQuery он срабатывает, когда DOM полностью загружен, но перед изображениями. Тем не менее, при использовании готового окна оно срабатывает и после загрузки изображений.
Nope 02 авг. 2012, в 22:59
0

Хорошее обоснование местоположения JavaScript на странице robertnyman.com/2008/04/23/… .
Jaime Hablutzel 14 сен. 2015, в 18:56

Теги:

javascript

jquery

html

html5

html5boilerplate

4 ответа

14

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

VangelisB 24 авг. 2013, в 18:56

5

+1 все ответы, блоги и мнения, которые я видел по этому вопросу, в значительной степени повторяют одни и те же 3 факта снова и снова. Вы первый человек, который дает реальный мир "зависит от того, что вы делаете" своего рода заявление. Отлично сработано.
monsto 05 сен. 2013, в 17:02

4

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

wanovak 02 авг. 2012, в 23:35

2

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

ahren 02 авг. 2012, в 23:47

Ещё вопросы

Большинство сценариев требуют загрузки DOM, что не гарантируется, если они находятся в верхней части страницы. Есть исключения из этого, хотя, по какой-то причине modenizer.js необходимо добавить в верхнюю часть страницы, поскольку он должен выполняться до полной загрузки DOM. Например, при использовании готового документа jQuery он срабатывает, когда DOM полностью загружен, но перед изображениями. Тем не менее, при использовании готового окна оно срабатывает и после загрузки изображений.
Хорошее обоснование местоположения JavaScript на странице robertnyman.com/2008/04/23/… .
+1 все ответы, блоги и мнения, которые я видел по этому вопросу, в значительной степени повторяют одни и те же 3 факта снова и снова. Вы первый человек, который дает реальный мир "зависит от того, что вы делаете" своего рода заявление. Отлично сработано.

Undefined · Accepted Answer · 2012-08-03T00-45-00.000Z

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

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

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

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

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

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

Ссылки

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

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

также см. en.wikipedia.org/wiki/Flash_of_unstyled_content
@underbar Спасибо за советы, я включу это в мой ответ
Обратите внимание, что есть исключения. Некоторые сценарии должны выполняться в первую очередь и должны быть в верхней части страницы. Modernizr.js является одним из них. Не знаю почему, хотя.
Modernizr должен быть загружен в голову, потому что после того, как он обнаружит свои особенности, он добавляет классы к элементу body, так что вы можете разветвлять свой CSS в зависимости от того, доступна ли какая-то функция. Вы хотите, чтобы эти классы были добавлены КАК МОЖНО СКОРЕЕ, чтобы ваш CSS принял правильную форму прямо при загрузке контента.