Где разместить JavaScript в файле HTML? - PullRequest
Новая
       35

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

198 голосов
/ 13 октября 2008

Скажем, у меня довольно здоровенный файл 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>

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

Ответы [ 11 ]

166 голосов
/ 13 октября 2008

Yahoo! Команда исключительной производительности рекомендует размещать скрипты внизу вашей страницы из-за способа загрузки компонентов браузерами.

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

73 голосов
/ 13 октября 2008

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

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

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

55 голосов
/ 05 мая 2014

Как правило, лучше всего размещать теги <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

4 голосов
/ 13 октября 2008

С 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 это не работает.

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

3 голосов
/ 16 октября 2008

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

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

3 голосов
/ 16 октября 2008

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

1 голос
/ 13 октября 2008

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

0 голосов
/ 26 февраля 2019

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

0 голосов
/ 26 июля 2016

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

  • , если вы планируете вставлять внешние JS-скрипты, то лучший место в заголовке страницы
  • если вы планируете использовать страницы на смартфонах, то внизу страницы, как раз перед тегом.
  • но, если вы планируете сделать комбинацию HTML и JS (динамически например, создал и заполнил таблицу HTML) это там, где тебе нужно там.
0 голосов
/ 18 ноября 2015

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

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

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

...