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

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

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

ОТВЕТЫ

Ответ 1

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

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

Ответ 2

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

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

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

Ответ 3

Как правило, лучшим местом для размещения тегов <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 предполагает, что браузеры загружают не более двух компонентов параллельно по имени узла. Если вы обслуживаете свои изображения из нескольких имен хостов, вы можете получить более двух загрузок, которые будут происходить параллельно. Однако при загрузке script браузер не запускает никаких других загрузок даже на разных именах хостов. Подробнее...

CSS

Немного не по теме, но... Поместите стили наверху.

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

Дополнительная литература

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

Ответ 4

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

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

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

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

Ответ 5

Помимо незначительных вещей (например, вызовы с одним оператором в событии onclick), я стараюсь не помещать Javascript внутри самих HTML-страниц, если он абсолютно уверен, что он никогда не сможет использоваться другой страницей.

Таким образом, почти все мои Javascript хранятся в JS файлах, загружаемых из HTML таким образом:

<script src="my_javascript.js"></script>

Это также делает разделение очистителя кода/разметки для меня.

Ответ 6

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

Ответ 7

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

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

Ответ 8

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

Ответ 9

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

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

Ответ 10

Я всегда ставил его в нижней части моей страницы, как ответ Уолтера Рамсби, но внешний JavaScript идет в голову. Теперь с CSS я не знаю, что всегда использую внешний CSS, поэтому он может охватывать весь мой сайт.

Ответ 11

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

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

Ответ 12

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