Где разместить 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>
Будет ли какая-то функциональная разница между каждым из вариантов?
![Безумие обратных вызовов в javascript [JS]](https://i.imgur.com/WsjO6zJb.png)
Ответы 12
Лучшее место для этого - прямо перед тем, как он вам понадобится, и не раньше.
Кроме того, в зависимости от физического местоположения ваших пользователей использование такой службы, как Amazon S3, может помочь пользователям загрузить ее с сервера, который физически ближе к ним, чем ваш сервер.
Является ли ваш js-скрипт широко используемой библиотекой, такой как jQuery или прототип? Если это так, то есть ряд компаний, таких как Google и Yahoo, у которых есть инструменты для предоставления вам этих файлов в распределенной сети.
Yahoo! Команда Exceptional Performance рекомендует размещение скриптов внизу вашей страницы из-за способа загрузки компонентов браузерами.
Конечно, комментарий Леви «как раз перед тем, как он вам понадобится, и не раньше» - действительно правильный ответ, то есть «в зависимости от обстоятельств».
Например, если вы собираетесь выполнять кучу вещей jQuery, вам понадобится загруженная библиотека, прежде чем вы действительно попытаетесь ее использовать.
Кроме того, Yahoo EPT рекомендует размещать JS внизу, потому что браузер должен перейти в однопоточный режим, пока JS загружается, а затем выполняется. Если сценарий находится в заголовке или в середине содержимого, браузер «приостановится», пока работает с JS. Если разместить JS внизу, контент будет загружен и, как правило, виден, поэтому пользователь может начать его читать, пока браузер все еще работает с JS.
Привет. Размещаем ли мы код вроде $(function () {...}) внизу страницы или он должен быть внутри <head>?
Надеюсь, упоминание "низ вашей страницы" здесь не выходит за рамки </body>?
Современные браузеры также могут читать атрибут defer. Вы можете установить defer = "defer" для тегов скрипта, которые не находятся в нижней части <body>, и когда браузер их увидит, он сначала завершит загрузку остальной части html, а затем вернется и интерпретирует содержимое тег скрипта. Это полезно, если вы используете какой-то фреймворк, в котором у вас нет полного контроля над страницей. Изучите эту статью и обратите внимание, что это живой документ, поэтому некоторая информация устарела: stackoverflow.com/questions/5250412/…
Имея 100 КБ Javascript, вы никогда не должны помещать его в файл. Используйте внешний файл сценария Javascript. Нет никаких шансов, что вы когда-либо будете использовать этот объем кода только на одной HTML-странице. Вероятно, вы спрашиваете, где вы должны загрузить файл Javascript, для этого вы уже получили удовлетворительные ответы.
Но я хотел бы отметить, что обычно современные браузеры принимают файлы Javascript с gzip! Просто заархивируйте файл x.js в x.js.gz и укажите его в атрибуте src. Он не работает в локальной файловой системе, для его работы нужен веб-сервер. Но экономия передаваемых байтов может быть огромной.
Я успешно протестировал его в Firefox 3, MSIE 7, Opera 9 и Google Chrome. По-видимому, в Safari 3 это не работает.
Для получения дополнительной информации см. это сообщение в блоге и еще один очень древняя страница, который, тем не менее, полезен, поскольку указывает, что веб-сервер может определить, может ли браузер принимать сжатый Javascript или нет. Если ваша серверная сторона может динамически выбирать отправку сжатого или простого текста, вы можете сделать страницу пригодной для использования во всех веб-браузерах.
Вы неправильно поняли вопрос ОП. Он спрашивал, где в HTML разместить тег скрипта. Он уже использовал внешний файл, а не встраивал скрипт. По общему признанию, это было менее ясно до того, как он редактировал вопрос в апреле 2009 года. Может, удалить этот ответ?
@Leandro Я думаю, это потому, что люди не всегда имеют в виду актуальный вопрос, но все же считают такие ответы, как этот, полезными. Тем не менее, этот ответ является полезен, но не обязательно актуален. Было бы лучше, если бы всплывающая подсказка для голосования содержала более четкие формулировки, например «Этот ответ полезен и актуален».
На gzip Javascript: вы можете просто настроить свой веб-сервер для его сжатия ... (Или используйте что-то вроде модуля / параметра gzip_static nginx) (и gunzip для других клиентов) Это должно, по крайней мере, отправить правильный заголовок типа содержимого, с кодировкой, помеченной как gzip, что, вероятно, приведет к еще большей поддержке браузера
Ответ зависит от того, как вы используете объекты javascript. Как уже указывалось, загрузка файлов javascript в нижний колонтитул, а не в верхний колонтитул, безусловно, улучшает производительность, но следует позаботиться о том, чтобы используемые объекты инициализировались позже, чем они загружаются в нижний колонтитул. Еще один способ - загрузить файлы js, помещенные в папку который будет доступен для всех файлов.
Как говорили другие, он, скорее всего, должен находиться во внешнем файле. Я предпочитаю включать такие файлы в конец <head />. Этот метод более удобен для людей, чем для машин, но благодаря этому я всегда знаю, где находится JS. Просто не так удобно включать файлы сценариев где-нибудь еще (imho).
Если вам действительно нужно выжать каждую последнюю мс, тогда вам, вероятно, следует делать то, что говорит Yahoo.
Используя кузиллион, вы можете проверить влияние на загрузку страницы различного размещения тегов скрипта, используя разные методы: встроенный, внешний, «HTML-теги», «document.write», «JS DOM element», «iframe» и «XHR eval». . См. помощь для объяснения различий. Он также может тестировать таблицы стилей, изображения и окна iframe.
Размещение javascript вверху могло бы показаться более аккуратным, но с функциональной точки зрения лучше пойти после HTML. Таким образом, ваш javascript не будет запускаться и пытаться ссылаться на элементы HTML до их загрузки. Подобная проблема часто становится очевидной только тогда, когда вы загружаете страницу через реальное интернет-соединение, особенно медленное.
Вы также можете попытаться динамически загрузить javascript, добавив элемент заголовка из другого кода javascript, хотя это имеет смысл только в том случае, если вы не используете весь код все время.
Как показывает практика, лучше всего размещать теги <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>
Почему?
The problem caused by scripts is that they block parallel downloads. The HTTP/1.1 specification suggests that browsers download no more than two components in parallel per hostname. If you serve your images from multiple hostnames, you can get more than two downloads to occur in parallel. While a script is downloading, however, the browser won't start any other downloads, even on different hostnames. More...
CSS
Немного не по теме, но ... Поместите таблицы стилей вверху.
While researching performance at Yahoo!, we discovered that moving stylesheets to the document HEAD makes pages appear to be loading faster. This is because putting stylesheets in the HEAD allows the page to render progressively. More...
дальнейшее чтение
Yahoo выпустила действительно классное руководство, в котором перечислены передовые методы ускорения работы веб-сайта. Обязательно стоит прочитать: https://developer.yahoo.com/performance/rules.html
«Проблема, вызванная скриптами, заключается в том, что они блокируют параллельные загрузки». - Это уже не так: w3.org/TR/html5/scripting-1.html#attr-script-async
Ваши ссылки на javascript могут быть либо в заголовке, либо в конце тега body, это правда, что производительность улучшается, если помещать ссылку в конец тега body, но если производительность не является проблемой, размещение их в заголовке лучше чтобы люди могли читать, и вы знали, где расположены ссылки, и могли легче ссылаться на них.
Я бы сказал, что это зависит от того, чего вы планировали достичь с помощью кода Javascript:
- если вы планировали вставить внешний ваш JS скрипт (ы), то лучший место в заголовке страницы
- если вы планировали использовать страницы на смартфонах, то внизу страницы, непосредственно перед тегом.
- но, если вы планировали сделать комбинацию HTML и JS (динамически создать и заполнить HTML-таблицу, например), тогда вы должны поставить это там, где вам это нужно.
То, что я сказал, заслужил минус !? Боже.
Какое отношение имеет внешний вид к тому, что сценарий закладывается в голову? Почему внизу страницы можно размещать скрипты специально для смартфонов? Ваше утверждение о динамической генерации HTML из JS верно только в том случае, если вы используете document.write, чего, вероятно, не должно быть.
Вы «предположили» то, что я думал, и из-за этого мой ответ получил минус? Вы, наверное, думаете, что ваше предположение лучше, чем мое объяснение, верно? Я просто планировал дать краткое объяснение, если кто-то не может понять, он попросит дополнительную информацию. В своем комментарии я предложил поместить JS в конец страницы для смартфонов и планшетов smarth, непосредственно перед концом тела, потому что загрузка всей страницы происходит быстрее, поскольку браузеру не нужно переключаться в режим «однопоточного», содержимое страницы начнет отображаться на экране ... но вы, наверное, это знаете.
Сценарии должны быть включены в конец тега body, потому что таким образом HTML будет анализироваться браузером и отображаться до загрузки сценариев.
Ответ на вопрос зависит. В этой ситуации есть 2 сценария, и вам нужно будет сделать выбор на основе вашего подходящего сценария.
Сценарий 1 - Критический сценарий / Необходимый сценарий
Если используемый вами скрипт важен для загрузки веб-сайта, его рекомендуется разместить в верхней части HTML-документа, то есть <head>. Некоторые примеры включают - код приложения, начальную загрузку, шрифты и т. д.
Сценарий 2 - Менее важные / аналитические скрипты
Также используются скрипты, не влияющие на вид сайта. Такие скрипты рекомендуется загружать после загрузки всех важных сегментов. И ответ на это будет в нижней части документа, то есть в нижней части вашего <body> перед закрывающим тегом. Некоторые примеры включают - Google Analytics, hotjar и т. д.
Бонус - асинхронный / отложенный
Вы также можете сообщить браузерам, что загрузка скрипта может выполняться одновременно с другими и может быть загружена в зависимости от выбора браузера, используя аргумент defer / async в коде скрипта.
например. <script async src = "script.js"></script>
Возможный дубликат Где мне помещать теги <script> в разметку HTML?