Каковы плюсы и минусы включения Javascript прямо перед тегом </head> против тега </body>? - PullRequest
Новая
       12

Каковы плюсы и минусы включения Javascript прямо перед тегом </head> против тега </body>?

7 голосов
/ 30 июля 2010

Редактировать: Хотя этот вопрос уже задавался и на него давались ответы ( 1 ), ( 2 ), ( 3 ), В ответах не упоминается возможность использования асинхронной и / или отложенной загрузки при включении файлов в <head>. Мне было предложено задать вопрос из-за нового кода Google Analytics, который использует оба этих метода.

Недавно я заметил, что Google Analytics теперь предлагает включить свой фрагмент Javascript прямо перед тегом </head>. Они предлагали включать фрагмент прямо перед тегом </body>.

В рекомендациях YUI для ускорения работы вашего веб-сайта предлагается размещать сценарии как можно дальше вниз по странице, поскольку сценарии могут блокировать параллельные загрузки:

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

Google говорит:

Одним из основных преимуществ асинхронного фрагмента является то, что вы можете расположить его в верхней части HTML-документа. Это увеличивает вероятность того, что маяк отслеживания будет отправлен до того, как пользователь покинет страницу. Обычно код JavaScript размещается в разделе <head>, и мы рекомендуем размещать фрагмент в нижней части раздела <head> для лучшей производительности.

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

Я уверен, что есть больше вещей, чтобы рассмотреть, чем эти две точки зрения. Что на тебя влияет? Что нужно учитывать?

Итак, каковы плюсы и минусы наличия ваших сценариев прямо перед </head> по сравнению с </body>?

Ответы [ 3 ]

7 голосов
/ 30 июля 2010

Совет по поводу <head> - не LINK TO EXTERNAL скрипты, которые необходимо загрузить. Это блокирует параллельные загрузки. Новейший код отслеживания Google использует отложенная загрузка и не блокирует параллельные загрузки. 

(function() {
    var ga = document.createElement('script'); ga.type = 'text/javascript'; ga.async = true;
    ga.src = ('https:' == document.location.protocol ? 'https://ssl' : 'http://www') + '.google-analytics.com/ga.js';
    var s = document.getElementsByTagName('script')[0]; s.parentNode.insertBefore(ga, s);
  })();
3 голосов
/ 30 июля 2010

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

2 голосов
/ 30 июля 2010

Размещение сценариев в <head> заставит браузер загружать файлы до того, как он отобразит страницу, и заблокирует параллельные загрузки. Если вы разместите свои скрипты непосредственно перед конечным тегом </body>, браузер проанализирует их после вашего контента, что должно привести к более быстрой загрузке страницы.

Используя самовыполняющуюся анонимную функцию с async=true, вы не блокируете параллельную загрузку.

Для действительно сложных приложений с модалами, если поставить скрипт прямо перед </body>, нужно было бы скрыть модал, если JS включен. 

<head>
<script>document.documentElement.className+='js';</script>
<style>html.js #modal { display:none; }</style>
</head>

Если приведенный выше фрагмент был помещен до </body>, он не будет проанализирован, как если бы он был в голове. Там могут быть определенные случаи и несоответствия с точки зрения времени готовности, которые вы могли бы заметить.

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

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

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

...