Ненавязчивый JavaScript: <script> вверху или внизу HTML-кода?
Я недавно прочитал манифест Yahoo Лучшие практики для ускорения вашего веб-сайта. Они рекомендуют по возможности помещать включение JavaScript в конец HTML-кода.
Но где именно и когда?
Ставить перед закрытием </html> или после? И, прежде всего, когда мы все же должны поместить его в раздел <head>?
![Безумие обратных вызовов в javascript [JS]](https://i.imgur.com/WsjO6zJb.png)
Ответы 7
Если вы поместите его внизу, он загружается в последнюю очередь, что увеличивает скорость просмотра страницы пользователем. Он должен быть до окончательного </html>, хотя в противном случае он не будет частью DOM.
Если же код нужен моментально, то вставьте его в голову.
Лучше всего размещать такие вещи, как виджеты блога, внизу, чтобы, если они не загружаются, это не повлияло на удобство использования страницы.
Нет, это не должно быть после </html>, так как это было бы недействительно. Лучшее место для размещения скриптов - прямо перед </body>.
Это в основном связано с тем, что большинство браузеров перестают отображать страницу, пока проверяют предоставленный вами скрипт. Так что можно размещать неблокирующий код в любом месте страницы (в основном я думаю о вещах, которые присоединяют функции к событию onLoad, поскольку привязка событий настолько быстрая, что фактически становится бесплатной). Большой убийца здесь - это начало страницы, добавляющее некоторый скрипт рекламного сервера, который может предотвратить любую загрузку страницы до того, как объявления будут полностью загружены, что увеличивает время загрузки вашей страницы.
Знаете, если вас действительно волнует скорость, то не будет ни </body>, ни </html> - закрывающие теги для этих типов элементов необязательны. Поместите <script> в самый конец и забудьте об использовании </body> и </html> вообще.
Надеюсь, Джим саркастичен - во всяком случае, не прислушивайтесь к его советам. Правильно сформированный XHTML требует закрывающих тегов для каждого элемента, включая теги body и html. Если ваш код недействителен XML, вы делаете это неправильно.
Нет, я не саркастичен. Взгляните на вопрос. Он определяет HTML, а не XHTML. Верно, что действительный XHTML требует этих вещей, а действительный HTML - нет. Нет ничего плохого в том, чтобы выбрать HTML и опустить закрывающие теги для этих типов элементов.
Есть два варианта создания действительно ненавязчивых сценариев:
- включение внешнего файла сценария через тег сценария в разделе заголовка
- включение внешнего файла сценария через тег сценария в нижней части тела (до
</body></html>)
Второй вариант может быть быстрее, так как исходное исследование Yahoo показало, что некоторые браузеры пытаются загрузить файлы сценариев, когда они попадают в тег сценария, и поэтому не загружают остальную часть страницы, пока не закончат работу. Однако, если в вашем скрипте есть «готовая» часть, которая должна выполняться, как только DOM будет готова, вам, возможно, понадобится держать ее в голове. Другой проблемой является макет - если ваш скрипт собирается изменить макет страницы, вы хотите, чтобы он загружался как можно раньше, чтобы ваша страница не тратила много времени на перерисовку себя перед вашими пользователями.
Если внешний сайт сценария находится в другом домене (например, внешние виджеты), возможно, стоит разместить его внизу, чтобы избежать задержки загрузки страницы.
И для любых проблем с производительностью сделай свои собственные тесты - то, что может быть правдой во время проведения исследования, может измениться из-за вашей собственной локальной настройки или изменений в браузерах.
Что касается сценария, имеющего «готовую» часть. Помещение этого скрипта в нижнюю часть тела гарантирует, что DOM готов к манипулированию, если вы поместите его в голову, вы должны обернуть его так, чтобы он ждал события DOMReady (или аналогичного)
@Juan Да, есть, но, помещая скрипт внизу, вы задерживаете событие DOMReady на время, необходимое браузеру для анализа документа и обработки элементов заголовка (200-500 мс), прежде чем он запросит этот скрипт. . В основном при загрузке первой страницы (при условии, что оттуда ее можно кэшировать). А если вложить в голову. Скорее всего, он будет готов намного быстрее. Итак, имея в виду HTML5, если скрипт должен изменить макет, когда DOM готова, вам теперь лучше, если в голове будет скрипт «async» или «defer».
Если вы хотите повозиться с положением своих скриптов, YSlow - отличный инструмент, который даст вам представление о том, улучшит ли он или снизит производительность. Размещение javascript в определенных положениях документа может действительно сократить время загрузки страницы.
Никогда не бывает так резко - Yahoo рекомендует размещать сценарии непосредственно перед закрывающим тегом </body>, что создаст иллюзию, что страница загружается быстрее при пустом кеше (поскольку сценарии не будут блокировать загрузку остальной части документа).
Однако, если у вас есть код, который вы хотите запустить при загрузке страницы, он начнет выполняться только после загрузки всей страницы. Если вы поместите скрипты в тег <head>, они начнут выполняться раньше, поэтому в загруженном кэше страница будет загружаться быстрее.
Кроме того, не всегда доступна привилегия размещения скриптов внизу страницы. Если вам нужно включить встроенные скрипты в ваши представления, которые зависят от библиотеки или какого-либо другого кода JavaScript, загруженного ранее, вы должны загрузить эти зависимости в тег <head>.
В целом рекомендации Yahoo интересны, но не всегда применимы, и их следует рассматривать в индивидуальном порядке.
Если у вас ненавязчивый javscript, у вас не будет встроенных сниппетов, в вопросе конкретно упоминается ненавязчивый.
встроенные теги <script> не подразумевают навязчивого JavaScript.
@ Эрик Гальперин: Что хорошего в использовании встроенных тегов скриптов, если они не навязчивы?
@Juan навязчивый Javascript означает, что пользовательский интерфейс не работает без него или что он встроен в разметку. Теги <script> отделены от разметки и могут использоваться с кодом, улучшающим интерфейс, но это не обязательно. Так что во встроенных тегах <script> нет ничего навязчивого.
@Eric: Вы не ответили на вопрос, если ваш скрипт ненавязчивый, нет необходимости в том, чтобы он был переплетен внутри вашего HTML в теге body, за исключением оптимизации производительности.
1. Меня зовут Эран, а не Эрик, 2. Если вы хотите передать данные в Javascript с серверного языка, например, в цикле, если элементы, вы можете использовать теги <script> для кодирования этих значений в переменные javascript, для использования, возможно, со встроенным редактированием или другим подобным поведением.
Т @ Эран: плохо. Ненавязчивый подход разделяет данные и контент и предоставляет данные в формате JSON вместо генерации при рендеринге представления.
Как говорили другие, поместите его перед закрывающими тегами телоhtml.
На днях к нам поступило множество звонков от клиентов, которые жаловались, что их сайты работают очень медленно. Мы посетили их локально и обнаружили, что им требуется 20–30 секунд для загрузки одной страницы. Думая, что серверы работают плохо, мы вошли в систему, но и веб-серверы, и серверы sql были примерно на 0% активности.
Через несколько минут мы поняли, что не работает внешний сайт, на который мы ссылались для тегов отслеживания Javascript. Это означало, что браузеры нажимали тег сценарий в разделе голова сайта и ожидали загрузки файла сценария.
Итак, по крайней мере, для сторонних / внешних скриптов я бы рекомендовал размещать их в последнюю очередь на странице. Затем, если они были недоступны, браузер, по крайней мере, загружал страницу до этого момента - и пользователь не обращал на это внимания.
Классная история, братан :) А если серьезно, это самый убедительный аргумент, который я видел в пользу размещения тегов скриптов внизу страницы.
Подводя итог, основываясь на приведенных выше предложениях:
- Для внешних скриптов (Google Analytics, сторонние маркетинговые трекеры и т. д.) Размещайте их перед тегом
</body>. - Скрипты, влияющие на макет страницы, помещайте в заголовок.
- Для сценариев, которые полагаются на «готовность к dom» (например, jquery), рассмотрите возможность размещения до
</body>, если у вас нет крайних причин для размещения сценариев в голове. - Если есть встроенные скрипты с зависимостями, поместите необходимые скрипты в заголовок.
возможный дубликат Где лучше всего разместить теги <script> в разметке HTML?