Что плюсы и минусы: положить javascript в голову и положить прямо перед трупом

Question

В большинстве книг / статей по javascript и веб-разработке написано, что вы должны поместить CSS в тег head и javascript внизу страницы.

Но когда я открываю HTML-источник известных веб-сайтов, таких как этот стекопоток, я обнаруживаю, что они помещают некоторые js-файлы в тег head.

Какие плюсы и минусы у обоих подходов и когда какой использовать?

Нашел еще один вопрос по той же проблеме: Где я должен объявить файлы JavaScript, используемые на моей странице? В или около ?

Answer 1

От Yahoo Рекомендации по ускорению вашего сайта :

Проблема, вызванная скриптами, заключается в том, что они блокируют параллельные загрузки. Спецификация HTTP / 1.1 предполагает, что Браузеры скачивают не более двух компоненты параллельно на имя хоста. Если вы обслуживаете ваши изображения из нескольких Имена хостов, вы можете получить более двух загрузка должна происходить параллельно. В то время как скрипт загружается, однако браузер не запускается загрузки, даже на разных имена хостов.

В некоторых ситуациях нелегко переместить сценарии вниз. Если для Например, скрипт использует document.write, чтобы вставить часть содержимое страницы не может быть перемещено ниже на странице. Там также может быть обзорные вопросы. Во многих случаях способы обойти эти ситуаций.

Альтернативное предложение, которое часто подходит использовать отложенные сценарии. Атрибут DEFER указывает, что скрипт не содержит document.write и является ключом к браузеры, которые они могут продолжить рендеринг. К сожалению, Firefox не поддерживает атрибут DEFER. В Internet Explorer скрипт может быть отложено, но не так сильно, как желательно. Если сценарий можно отложить, его также можно переместить в нижнюю часть страница. Это сделает вашу сеть страницы загружаются быстрее.

Поэтому, как правило, предпочтительнее размещать их внизу. Тем не менее, это не всегда возможно, и это часто не делает столь значительным в любом случае.

Answer 2

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

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

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

Если вы добавляете события click к элементам, они не будут активны до тех пор, пока не станут видны сами элементы.

Иногда эти проблемы требуют, чтобы вы поместили свои сценарии в голову, в других случаях вам будет хорошо, вставив их внизу.

ИМХО (полностью против YSlow и множества умных людей), вы должны держать свои скрипты в теге head и просто полагаться на то, что они будут кэшироваться большую часть времени.

Answer 3

В общем, вы должны размещать ссылки на скрипты внизу вашей страницы. Скрипты не только должны быть загружены, они также должны быть оценены и выполнены до того, как блок будет освобожден, и страница перейдет к процессу рендеринга. Такие вещи, как Modernizr, должны быть размещены в верхней части, потому что он выполняет некоторые функции, а также прокладки HTML5, которые вы, вероятно, захотите.

Еще одна причина, по которой вы хотите попытаться разместить скрипты внизу страницы, - это одиночные точки отказа или SPOF. Это когда время ожидания скрипта или по какой-то другой причине блокирует выполнение страницы. Это может часто случаться со сторонними рекламными библиотеками и т. Д.

Да, возможно, вам придется немного подумать о том, как вы разрабатываете свое приложение, но я обнаружил, что оно стало очень естественным для меня очень быстро. За последние 4 года я создал сотни веб-приложений со сценарием внизу, и я могу заметить разницу. Я могу быть 500 мс, это может быть 5000 мс, но все это имеет значение.

Answer 4

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

Answer 5

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