Ненавязчивый JavaScript: <script>вверху или внизу HTML-кода? - PullRequest
Новая
       49

Ненавязчивый JavaScript: <script>вверху или внизу HTML-кода?

88 голосов
/ 27 сентября 2008

Я недавно прочитал манифест Yahoo Рекомендации по ускорению вашего сайта . Они рекомендуют размещать включение JavaScript внизу HTML-кода, когда мы можем.

Но где именно и когда?

Должны ли мы поставить его перед закрытием </html> или после? И прежде всего, когда мы все еще должны поместить его в раздел <head>?

Ответы [ 7 ]

84 голосов
/ 27 сентября 2008

Есть две возможности для действительно ненавязчивых скриптов:

  • включая внешний файл скрипта с помощью тега скрипта в разделе head
  • включая внешний файл сценария через тег сценария внизу тела (до </body></html>)

Второй способ может быть быстрее, поскольку первоначальное исследование Yahoo показало, что некоторые браузеры пытаются загружать файлы сценариев, когда попадают в тег сценария, и поэтому не загружают оставшуюся часть страницы, пока не завершат работу. Однако, если у вашего скрипта есть «готовая» часть, которая должна выполняться, как только DOM будет готов, вам, возможно, потребуется иметь ее в голове. Еще одна проблема - макет - если ваш скрипт собирается изменить макет страницы, вы хотите, чтобы он был загружен как можно раньше, чтобы ваша страница не тратила много времени на перерисовку перед вашими пользователями.

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

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

31 голосов
/ 27 сентября 2008

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

Кроме того, привилегия помещать скрипты внизу страницы не всегда доступна. Если вам нужно включить встроенные скрипты в свои представления, которые зависят от библиотеки или какого-либо другого кода JavaScript, загружаемого ранее, вы должны загрузить эти зависимости в тег <head>.

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

20 голосов
/ 03 мая 2009

Как уже говорили другие, поместите его перед закрывающими тегами body html .

На днях нам приходили многочисленные звонки от клиентов, жалующихся на то, что их сайты были очень медленными. Мы посетили их локально и обнаружили, что для загрузки одной страницы им понадобилось 20-30 секунд. Думая, что серверы работают плохо, мы вошли в систему - но веб-серверы и серверы sql работали на ~ 0%.

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

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

16 голосов
/ 27 января 2012

Подводя итог, основываясь на предложениях выше:

  1. Для внешних скриптов (аналитика Google, сторонние маркетинговые трекеры и т. Д.) Поместите их перед тегом </body>.
  2. Для сценариев, которые влияют на макет страницы, поместите в заголовок.
  3. Для сценариев, которые полагаются на 'dom ready' (например, jquery), рассмотрите возможность размещения перед </body>, если только у вас нет веской причины помещать сценарии в голову.
  4. Если есть встроенные сценарии с зависимостями, поместите необходимые сценарии в заголовок.
6 голосов
/ 27 сентября 2008

Нет, это не должно быть после </html>, поскольку это будет недействительно. Лучшее место для написания сценариев - прямо перед </body>

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

.
5 голосов
/ 27 сентября 2008

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

http://developer.yahoo.com/yslow/

3 голосов
/ 27 сентября 2008

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

Если код нужен сразу же, тогда положите его в голову.

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

Добро пожаловать на сайт PullRequest, где вы можете задавать вопросы и получать ответы от других членов сообщества.

Нет похожих вопросов

...