Недавно я прочитал манифест Yahoo "Лучшие практики для ускорения вашего веб-сайта" . Они рекомендуют включить JavaScript в нижней части HTML-кода, когда мы можем.
Но где именно и когда?
Должны ли мы поставить его перед закрытием </html> или после? И прежде всего, когда мы должны поместить его в раздел <head>?
Есть две возможности для действительно ненавязчивых скриптов:
</body></html>)Второе может быть быстрее, поскольку оригинальное исследование Yahoo показало, что некоторые браузеры пытаются загрузить файлы script, когда они попадают в тег script, и поэтому не загружают оставшуюся часть страницы, пока они не закончатся. Однако, если ваш script имеет "готовую" часть, которая должна выполняться, как только DOM готов, вам может понадобиться иметь ее в голове. Другая проблема заключается в макете - если ваш script собирается изменить макет страницы, который вы хотите загрузить, как можно раньше, чтобы ваша страница не тратила много времени на перерисовку перед вашими пользователями.
Если внешний script сайт находится в другом домене (например, внешние виджеты), возможно, стоит положить его внизу, чтобы избежать задержки загрузки страницы.
И для любых проблем с производительностью ваши собственные тесты - то, что может быть истинно в одно время, когда исследование выполнено, могут измениться с помощью вашей локальной настройки или изменений в браузерах.
Он никогда так не сокращается и не сужается - Yahoo рекомендует помещать скрипты непосредственно перед закрывающим тегом </body>, что создаст иллюзию того, что страница загружается быстрее в пустом кеше (поскольку скрипты не будут блокировать загрузку остальной части документ).
Однако, если у вас есть код, который вы хотите запустить при загрузке страницы, он будет запускаться только после загрузки всей страницы. Если вы поместите скрипты в тег <head>, они начнут выполнять раньше - поэтому на загрунтованном кеше, на самом деле, страница будет загружаться быстрее.
Кроме того, привилегия размещения скриптов в нижней части страницы не всегда доступна. Если вам нужно включить встроенные скрипты в ваши представления, которые зависят от библиотеки или какого-либо другого JavaScript-кода, загружаемого ранее, вы должны загрузить эти зависимости в теге <head>.
Все рекомендации Yahoo интересны, но не всегда применимы и должны рассматриваться в каждом конкретном случае.
Как говорили другие, поместите его перед тегами html закрывающего тела.
На днях у нас были многочисленные звонки от клиентов, жалующихся на их сайты, которые были очень медленными. Мы посетили их локально и обнаружили, что они загрузили одну страницу за 20-30 секунд. Думая, что серверы плохо работают, мы вошли в систему, но оба веб-сервера и серверы sql были ~ 0% активности.
Через несколько минут мы поняли, что внешний сайт был недоступен, к которому мы привязывались для тегов отслеживания Javascript. Это означало, что браузеры попадали в тег script в разделе заголовка сайта и ожидали загрузки файла script.
Итак, для сторонних/внешних скриптов, по крайней мере, я бы рекомендовал разместить их как последнюю вещь на странице. Тогда, если они были недоступны, браузер по крайней мере загрузит страницу до этой точки - и пользователь не обратит на это внимания.
Подводя итог, основываясь на приведенных выше предложениях:
</body>.</body>, если у вас нет причин для размещения сценариев в голове.Нет, это не должно быть после </html>, поскольку это было бы неверно. Лучшее место для размещения скриптов - прямо перед </body>
Это в основном потому, что большинство браузеров перестают отображать страницу, пока они определяют script, которые вы предоставляете. Поэтому его ОК, чтобы помещать неблокирующий код в любом месте страницы (я в основном думаю о вещах, которые присоединяют функции к событию onLoad, так как привязка событий настолько быстро, насколько эффективно быть свободным). Крупный убийца здесь находится в начале страницы, помещенной в какой-то рекламный сервер script, который может помешать загрузке страницы до того, как объявления полностью загрузится, что сделает ваш сайт загружаемым разным шаром
Если вы хотите возиться с позицией ваших сценариев, YSlow - отличный инструмент для того, чтобы дать вам вкус, если он будет улучшать или ухудшать производительность. Вставка javascript в определенные позиции документа может действительно убить время загрузки страницы.
Если вы поместите его внизу, он загрузится последним, следовательно, ускорит скорость, которую пользователь может увидеть на странице. Он должен быть до окончательного </html>, хотя в противном случае он не будет частью DOM.
Если код нужен мгновенно, а затем поместите его в голову.
Лучше всего разместить такие вещи, как виджеты блога внизу, чтобы, если они не загружаются, это не влияет на удобство использования страницы.