Где разместить JavaScript в файле HTML?

210

Скажем, у меня довольно здоровенный файл JavaScript, упакованный примерно до 100 КБ или около того. Под файлом я подразумеваю, что это внешний файл, который будет связан через <script src="...">, а не вставлен в сам HTML.

Где лучшее место, чтобы поместить это в HTML?

<html>
<head>
    <!-- here? -->
    <link rel="stylesheet" href="stylez.css" type="text/css" />
    <!-- here? -->
</head>
<body>
    <!-- here? -->
    <p>All the page content ...</p>
    <!-- or here? -->
</body>
</html>

Будет ли какая-либо функциональная разница между каждым из вариантов?

javascript html optimization nickf
источник
Возможный дубликат Где я должен поместить теги <script> в разметку HTML?
Ивар

Ответы:

175

Yahoo! Команда Exceptional Performance рекомендует размещать скрипты внизу страницы из-за того, как браузеры загружают компоненты.

Конечно, комментарий Леви «как раз перед тем, как он вам понадобится, и не раньше», действительно является правильным ответом, то есть «это зависит».

Уолтер Рамсби
источник
4
Например, если вы собираетесь делать кучу jQuery, вам понадобится загрузить библиотеку, прежде чем вы действительно попытаетесь ее использовать.
BryanH
58
Кроме того, причина, по которой Yahoo EPT рекомендует размещать JS внизу, заключается в том, что браузер должен переходить в однопоточный режим, пока JS загружается, а затем выполняется. Если сценарий находится в заголовке или в середине содержимого, браузер «приостановит работу», пока работает с JS. Поместив JS внизу, контент будет загружен и, как правило, виден, чтобы пользователь мог начать читать его, пока браузер все еще работает с JS.
BryanH
1
Здравствуй. Размещаем ли мы такой код $(function () {...})в нижней части страницы или он должен быть внутри <head>?
Тханг Фам
7
Надеюсь упоминание "нижней части вашей страницы" здесь не выходит за рамки </body>?
Mr_Green
1
Современные браузеры также могут читать атрибут «defer». Вы можете установить defer = "defer" для тегов скрипта, которые не находятся внизу <body>, и когда браузер увидит их, он сначала завершит загрузку остальной части HTML, а затем вернется и интерпретирует содержимое тег сценария. Это полезно, если вы используете какую-то платформу, где у вас нет полного контроля над страницей. Загляните в эту статью и обратите внимание, что это живой документ, поэтому некоторая информация устарела: stackoverflow.com/questions/5250412/…
LinuxDisciple
75

Лучшее место для этого - как раз перед тем, как оно понадобится, и не раньше.

Кроме того, в зависимости от физического местоположения ваших пользователей, использование сервиса, такого как сервис Amazon S3, может помочь пользователям загрузить его с сервера, который физически ближе к ним, чем ваш сервер.

Является ли ваш js-скрипт широко используемой библиотекой вроде jQuery или прототипа? Если так, то есть ряд компаний, таких как Google и Yahoo, которые имеют инструменты для предоставления этих файлов для вас в распределенной сети.

Леви Розоль
источник
60

Как правило, лучшее место для размещения <script>тегов - это нижняя часть страницы, непосредственно перед </body>тегом. Что-то вроде этого:

<html>
    <head>
        <title>My awesome page</title>

        <!-- CSS -->
        <link rel="stylesheet" type="text/css" href="...">
        <link rel="stylesheet" type="text/css" href="...">
        <link rel="stylesheet" type="text/css" href="...">
        <link rel="stylesheet" type="text/css" href="...">

    </head>
    <body>
        <!-- Content content content -->

        <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script>
        <script type="text/javascript" src="..."></script>
        <script type="text/javascript" src="..."></script>
        <script type="text/javascript" src="..."></script>
    </body>
</html>

Зачем?

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

CSS

Немного не по теме, но ... Положите таблицы стилей вверху.

Исследуя производительность в Yahoo !, мы обнаружили, что перемещение таблиц стилей в документ HEAD делает страницы загружаемыми быстрее. Это связано с тем, что размещение таблиц стилей в заголовке позволяет странице отображаться постепенно. Больше...

дальнейшее чтение

Yahoo выпустила действительно классное руководство, в котором перечислены лучшие практики для ускорения работы сайта. Определенно стоит прочитать: https://developer.yahoo.com/performance/rules.html

Martynas
источник
1
«Проблема, вызванная скриптами, заключается в том, что они блокируют параллельные загрузки». - Это больше не соответствует действительности: w3.org/TR/html5/scripting-1.html#attr-script-async
Квентин,
4

С 100k Javascript, вы никогда не должны помещать его в файл. Используйте внешний скрипт Javascript file. В аду нет шансов, что вы когда-нибудь будете использовать этот объем кода только на одной HTML-странице. Скорее всего, вы спрашиваете, где вы должны загрузить файл Javascript, для этого вы уже получили удовлетворительные ответы.

Но я хотел бы отметить, что современные браузеры обычно принимают файлы gzip ped Javascript! Просто распакуйте x.jsфайл x.js.gzи укажите на это в srcатрибуте. Он не работает в локальной файловой системе, вам нужен веб-сервер, чтобы он работал. Но экономия в переданных байтах может быть огромной.

Я успешно протестировал его в Firefox 3, MSIE 7, Opera 9 и Google Chrome. По-видимому, это не работает в Safari 3.

Для получения дополнительной информации см. Этот пост в блоге и другую очень древнюю страницу, которая, тем не менее, полезна, поскольку указывает на то, что веб-сервер может определить, может ли браузер принимать сжатый Javascript или нет. Если ваша серверная сторона может динамически выбирать отправку gzipped или простого текста, вы можете сделать страницу пригодной для использования во всех веб-браузерах.

Барт
источник
8
Вы неправильно поняли вопрос ОП. Он спрашивал, где в HTML поставить тег script. Он уже использовал внешний файл, не вставляя скрипт. По общему признанию, это было менее ясно до его редактирования вопроса в апреле '09. Возможно удалить этот ответ?
Марк Эмери
@Leandro Я думаю, это потому, что люди не всегда помнят реальный вопрос, но все же считают ответы, подобные этому, полезными. Тем не менее, этот ответ является полезным , но не обязательно актуально. Это может сработать лучше, если всплывающая подсказка для голосования содержит более четкую формулировку, например «Этот ответ полезен и актуален».
WynandB
1
В gzipped Javascript: Вы можете просто настроить свой веб-сервер для его сжатия ... (или использовать что-то вроде модуля / опции gzip_static nginx) (и gunzip для других клиентов). Это должно по крайней мере отправить правильный заголовок типа контента, с кодировкой, помеченной как gzip, что, вероятно, приведет к еще лучшей поддержке браузера
Герт ван ден Берг
4

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

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

Матиас Вандель
источник
3

Используя cuzillion, вы можете проверить влияние на загрузку страницы различного размещения тегов скрипта, используя различные методы: встроенный, внешний, «теги HTML», «document.write», «элемент JS DOM», «iframe» и «XHR eval». , Смотрите справку для объяснения различий. Он также может тестировать таблицы стилей, изображения и фреймы.

Сэм Хаслер
источник
1

Ответ зависит от того, как вы используете объекты JavaScript. Как уже указывалось, загрузка файлов javascript в нижний колонтитул, а не в верхний колонтитул, безусловно, повышает производительность, но следует позаботиться о том, чтобы используемые объекты инициализировались позже, чем они загружались в нижний колонтитул. Еще один способ - загрузить файлы 'js', помещенные в папку, которая будет доступна для всех файлов.

GustyWind
источник
0

Как уже говорили другие, он, скорее всего, должен идти во внешнем файле. Я предпочитаю включать такие файлы в конце <head />. Этот метод более дружественный человеку, чем машинному, но так я всегда знаю, где находится JS. Просто не так легко читать файлы сценариев где-либо еще (imho).

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

неистовый
источник
0

Сценарии должны быть включены в конец тега body, потому что таким образом HTML будет анализироваться браузером и отображаться до загрузки сценариев.

Хосе Сальгадо
источник
0

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

Сценарий 1 - Критический сценарий / Необходим сценарий

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

Сценарий 2 - Менее важные / аналитические скрипты

Также используются скрипты, которые не влияют на вид сайта. Такие сценарии рекомендуется загружать после загрузки всех важных сегментов. И ответом будет нижняя часть документа, т. Е. Нижняя часть вашего документа <body>перед закрывающим тегом. Вот некоторые примеры: Google Analytics, Hotjar и т. Д.

Бонус - асинхронный / отсроченный

Вы также можете сказать браузерам, что загрузка скрипта может быть выполнена одновременно с другими и может быть загружена на основе выбора браузера, используя аргумент defer / async в коде скрипта.

например. <script async src="script.js"></script>

Правин Тирумуруган
источник
-1

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

Тимоти Трусдейл
источник
-1

Я бы сказал, что это зависит от того, чего вы планируете достичь с помощью кода Javascript:

  • если вы планируете вставлять внешние JS-скрипты, то лучшее место - в начале страницы
  • если вы планируете использовать страницы на смартфонах, то внизу страницы, прямо перед тегом.
  • но если вы планировали создать комбинацию HTML и JS (например, динамически создаваемую и заполненную таблицу HTML), вы должны поместить ее туда, где вам нужно.
Людус Н
источник
То, что я сказал, чтобы заслужить минус !? Geez.
Ludus H
Какое отношение к внешнему виду имеет отношение к наложению сценария на голову? Почему внизу страницы можно разместить скрипты специально для смартфонов? Ваше утверждение о динамическом генерировании HTML из JS верно только в том случае, если вы используете document.write, чего, вероятно, не должно быть.
Квентин
Вы "предположили", что я подумала, и из-за того, что мой ответ получил минус? Вы думаете, что ваша презумпция лучше моего объяснения, верно? Я просто планировал сделать краткое объяснение, если кто-то не сможет понять, он попросит дополнительную информацию. В своем комментарии я предложил поместить JS в конец страницы для умных телефонов и планшетов, непосредственно перед концом основной части, потому что загрузка всей страницы происходит быстрее, так как браузеру не нужно переключаться в режим «одного потока», содержимое страницы начнет появляться на экране ... но вы, наверное, знаете это.
Ludus H