JavaScript в <head> или непосредственно перед</body>?

Я собираюсь начать новый веб-проект, и я планирую поместить свои JS-скрипты в голову и перед конечным телом, используя следующую схему:

Скрипты, необходимые для UX страницы, идут в голову. Когда я понял, что веб-скрипты в голове загружаются до загрузки страницы, поэтому имеет смысл разместить сценарии, которые необходимы для работы пользователя там.
Скрипты, которые не имеют существенного значения для дизайна и UX (скрипты Google Analytics и т.д.) на странице, предшествуют </body>.

Является ли это разумным подходом?

Другой подход заключается в том, чтобы поместить все сценарии в <head> и добавить атрибуты отсрочки в несущественные скрипты - однако я прочитал, что более старые версии FF не принимают атрибут отсрочки.

Ответ 1

Я думаю, что многие разработчики запускают javascript непосредственно перед </body>, чтобы он запускался после того, как все элементы были обработаны.

Однако, если вы правильно упорядочите свой код, позиция на странице не имеет значения.

Например, при использовании jQuery вы можете гарантировать, что код не будет запущен, пока страница и ее элементы не будут полностью отображены, выполнив следующее:

$(document).ready(function(){
   //Code here
});

Затем ссылку script можно поместить в тег head.

Обновить - теги script должны быть указаны непосредственно перед </body>. Это предотвращает блокировку отображения при загрузке скриптов и намного лучше для скорости восприятия сайта.

При использовании этой техники не следует использовать навязчивый javascript.

Ответ 2

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

Кроме того, в идеале вы могли бы размещать такие ссылки в другом (под) домене. Ссылки на jquery также должны указывать на CDG googles.

Подробнее см. http://developer.yahoo.com/performance/rules.html.

Ответ 3

Я бы сказал, что это совершенно разумно. Как вы сказали, до тех пор, пока вы не перемещаете важные сценарии (например, jQuery, Modernizr и т.д.) Из <head>, у вас не должно быть проблем.

Перемещение несущественных сценариев в нижней части страницы должно помочь с воспринимаемой скоростью загрузки (что и минимизация/конкатенация скриптов).

Ответ 4

Одной из причин, по которой вы хотите поставить скрипты перед </body>, является то, что они манипулируют DOM без взаимодействия с пользователем, поэтому вам нужно, чтобы DOM загружался, чтобы манипулировать. Другой способ сделать это - добавить прослушиватель событий и запустить сценарии при загрузке страницы, но для этого потребуется дополнительный код, который может усложниться, если у вас много скриптов, особенно тех, которые вы сами не написали. Помещение их в конце страницы также ускорит загрузку страницы, хотя в случае DOM-манипулирования скриптами вы можете получить некоторые не очень-то хорошие результаты.

Ответ 5

Поместите Javascript в отдельный файл и поместите ссылку на него в головной части HTML.

Ответ 6

Все зависит от того, что вы подразумеваете под "существенным для UX". Я согласен с тем, что modernizr появляется рано, например, но не все должно сразу загружаться. Если вы пытаетесь избежать вспышки неровного текста (FOUT), это хорошая причина. Аналогичным образом, если у вас есть сценарии, которые влияют на то, как выглядит страница перед тем, как пользователь что-либо делает, вы должны загрузить их раньше.

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

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

Кроме того, некоторые версии IE будут вызывать ошибки, если вы попытаетесь запустить script до того, как загрузится элемент, к которому он относится.

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