JavaScript в <head>или только до </body>? - PullRequest
Новая
       12

JavaScript в <head>или только до </body>?

46 голосов
/ 13 октября 2011

Я собираюсь приступить к новому веб-проекту и планирую поместить некоторые скрипты Java в <head>, а также некоторые перед </body>, используя следующую схему:

  1. Скрипты, которые необходимы для UX страницы: в <head>.Как я уже изучил, веб-сценарии в <head> загружаются до загрузки страницы, поэтому имеет смысл поместить туда сценарии, которые необходимы для взаимодействия с пользователем.

  2. Сценарии, которые не являются необходимыми для дизайна и UX (сценарии Google Analytics и т. Д.): До </body>.

Это разумный подход?

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

Ответы [ 6 ]

30 голосов
/ 13 октября 2011

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

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

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

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

Тогда ссылку на скрипт можно поместить в тег head.

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

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

13 голосов
/ 13 октября 2011

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

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

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

4 голосов
/ 13 октября 2011

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

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

3 голосов
/ 13 октября 2011

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

1 голос
/ 13 октября 2011

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

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

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

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

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

0 голосов
/ 13 октября 2011

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

...