Где я должен помещать теги <script> в разметку HTML?

При встраивании JavaScript в документ HTML, где нужно разместить теги <script> и включить JavaScript? Кажется, я помню, что вы не должны размещать их в разделе <head>, но размещение в начале раздела <body> тоже плохо, так как JavaScript должен быть проанализирован до того, как страница будет полностью отображена ( или что-то типа того). Похоже, что конец раздела <body> остается логическим местом для тегов <script>.

Итак, где подходящее место для размещения тегов <script>?

(Этот вопрос ссылается на этот вопрос, в котором было высказано предположение, что вызовы функций JavaScript должны быть перенесены из тегов <a> в теги <script>. в частности, используя jQuery, но подходят и более общие ответы.)

Ответы

Ответ 1

Вот что происходит, когда браузер загружает веб-сайт с <script> на нем:

Получить страницу HTML (например, index.html)
Начните синтаксический разбор HTML
Парсер встречает <script> ссылающийся на внешний файл сценария.
Браузер запрашивает файл сценария. Между тем, синтаксический анализатор блокирует и останавливает анализ другого HTML на вашей странице.
Через некоторое время скрипт загружается и затем выполняется.
Парсер продолжает анализировать остальную часть документа HTML.

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

Почему это происходит?

Любой скрипт может вставить свой собственный HTML через document.write() или другие манипуляции с DOM. Это означает, что синтаксический анализатор должен дождаться загрузки и выполнения сценария, прежде чем он сможет безопасно проанализировать остальную часть документа. В конце концов, скрипт мог бы вставить свой собственный HTML в документ.

Однако большинство разработчиков JavaScript больше не манипулируют DOM во время загрузки документа. Вместо этого они ждут, пока документ не будет загружен до его изменения. Например:

<!-- index.html -->
<html>
    <head>
        <title>My Page</title>
        <script type="text/javascript" src="my-script.js"></script>
    </head>
    <body>
        <div id="user-greeting">Welcome back, user</div>
    </body>
</html>

Javascript:

// my-script.js
document.addEventListener("DOMContentLoaded", function() { 
    // this function runs when the DOM is ready, i.e. when the document has been parsed
    document.getElementById("user-greeting").textContent = "Welcome back, Bart";
});

Поскольку ваш браузер не знает, что my-script.js не будет изменять документ до тех пор, пока он не будет загружен и не запущен, анализатор прекратит разбор.

Устаревшая рекомендация

Старый подход к решению этой проблемы заключался в том, чтобы положить теги <script> в нижней части вашего <body>, потому что это гарантирует, что синтаксический анализатор не блокируется до самого конца.

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

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

Современный подход

Сегодня браузеры поддерживают async и defer атрибуты скриптов. Эти атрибуты говорят браузеру безопасно продолжать синтаксический анализ во время загрузки скриптов.

асинхронной

<script type="text/javascript" src="path/to/script1.js" async></script>
<script type="text/javascript" src="path/to/script2.js" async></script>

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

Согласно http://caniuse.com/#feat=script-async, 94,57% всех браузеров поддерживают это.

откладывать

<script type="text/javascript" src="path/to/script1.js" defer></script>
<script type="text/javascript" src="path/to/script2.js" defer></script>

Скрипты с атрибутом defer выполняются по порядку (т.е. первый скрипт 1, а затем сценарий 2). Это также не блокирует браузер.

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

Согласно http://caniuse.com/#feat=script-defer, 94,59% всех браузеров поддерживают это. 94,92% поддерживают его хотя бы частично.

Важное замечание о совместимости браузера: в некоторых случаях IE <= 9 может выполнять отложенные скрипты не в порядке. Если вам необходимо поддерживать эти браузеры, прочитайте это первым!

Вывод

Текущее состояние дел состоит в том, чтобы поместить скрипты в <head> и использовать атрибуты async или defer. Это позволяет загружать скрипты как можно скорее, не блокируя ваш браузер.

Хорошо, что ваш сайт должен по-прежнему правильно загружать 6% браузеров, которые не поддерживают эти атрибуты, в то же время ускоряя другие 94%.

Ответ 2

Перед тегом закрывающего тела, как указано на

http://developer.yahoo.com/performance/rules.html#js_bottom

Поместите скрипты в нижней части

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

Ответ 3

Неблокирующие теги script можно разместить где угодно:

<script src="script.js" async></script>
<script src="script.js" defer></script>
<script src="script.js" async defer></script>

async script будет выполняться асинхронно, как только он будет доступен
defer script выполняется, когда документ завершил синтаксический анализ
async defer script возвращается к отложенному поведению, если async не поддерживается

Такие скрипты будут выполняться асинхронно/после завершения документа, что означает, что вы не можете сделать это:

<script src="jquery.js" async></script>
<script>jQuery(something);</script>
<!--
  * might throw "jQuery is not defined" error
  * defer will not work either
-->

Или это:

<script src="document.write(something).js" async></script>
<!--
  * might issue "cannot write into document from an asynchronous script" warning
  * defer will not work either
-->

Или это:

<script src="jquery.js" async></script>
<script src="jQuery(something).js" async></script>
<!--
  * might throw "jQuery is not defined" error (no guarantee which script runs first)
  * defer will work in sane browsers
-->

Или это:

<script src="document.getElementById(header).js" async></script>
<div id="header"></div>
<!--
  * might not locate #header (script could fire before parser looks at the next line)
  * defer will work in sane browsers
-->

Сказав это, асинхронные скрипты предлагают следующие преимущества:

Параллельная загрузка ресурсов:
Браузер может загружать таблицы стилей, изображений и другие сценарии параллельно, не дожидаясь загрузки и выполнения script.
Независимость от исходного порядка:
Вы можете поместить скрипты внутри головы или тела, не беспокоясь о блокировке (полезно, если вы используете CMS). Порядок выполнения все еще имеет значение.

Можно обойти проблемы порядка выполнения, используя внешние скрипты, поддерживающие обратные вызовы. Многие сторонние API-интерфейсы JavaScript теперь поддерживают неблокирующее выполнение. Ниже приведен пример аффинной загрузки API Карт Google.

Ответ 4

Стандартный совет, продвигаемый Yahoo! Команда Exceptional Performance - разместить теги <script> в конце тела документа, чтобы они не блокировали отображение страницы.

Но есть несколько новых подходов, которые предлагают более высокую производительность, как описано в этом ответе, о времени загрузки файла JavaScript Google Analytics:

Есть несколько отличные слайды от Steve Souders (эксперт по оценке на стороне клиента) о:

Различные методы загрузки внешних файлов JavaScript параллельно

их влияние на время загрузки и рендеринг страниц

какие индикаторы "в процессе" отображаются в браузере (например, "загрузка" в строке состояния, курсор мыши для песочных часов).

Ответ 5

Если вы используете JQuery, тогда поместите javascript везде, где вы найдете его лучше, и используйте $(document).ready(), чтобы обеспечить правильную загрузку вещей перед выполнением каких-либо функций.

На стороне примечания: Мне нравятся все теги script в разделе <head>, поскольку это кажется самым чистым местом.

Ответ 6

~~XHTML не будет проверять, есть ли script где-либо, кроме элемента head.~~, он может быть везде.

Вы можете отложить выполнение с помощью чего-то вроде jQuery, поэтому не имеет значения, где он размещен (за исключением небольшого удара производительности при разборе).

Ответ 7

<script src="myjs.js"></script>
</body>

Тег

script должен использоваться всегда перед телом или Нижним в HTML файле.

вы можете увидеть содержимое страницы перед загрузкой файла js.

проверьте это, если требуется: http://stevesouders.com/hpws/rule-js-bottom.php

Ответ 8

Современный подход в 2019 году - использование скриптов типа модуля ES6.

<script type="module" src="..."></script>

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

Различия между скриптом и модулем описаны здесь:

fooobar.com/questions/419321/...

Выполнение модуля по сравнению со сценарием описано здесь:

https://developers.google.com/web/fundamentals/primers/modules#defer

Поддержка показана здесь:

https://caniuse.com/#feat=es6-module

Ответ 9

Обычный (и общепринятый) ответ "внизу", потому что тогда весь DOM будет загружен, прежде чем что-либо начнет выполнение.

По разным причинам существуют инакомыслящие, начиная с доступной практики, чтобы преднамеренно начать выполнение с события onload на странице.

Ответ 10

Размещение сценариев во внешних файлах имеет ряд преимуществ: он разделяет HTML и код, облегчает чтение и поддержку HTML и JavaScript. Кэшированные файлы JavaScript могут ускорить загрузку страниц. Получить страницу HTML (например, index.html). Начать анализ HTML. тег, ссылающийся на внешний файл скрипта. Браузер запрашивает файл скрипта. Тем временем парсер блокирует и прекращает анализ другого HTML-кода на вашей странице. Через некоторое время скрипт загружается и впоследствии выполняется. Парсер продолжает анализ остальной части HTML-документа.

Ответ 11

В зависимости от script и его использования наилучшим (с точки зрения загрузки страницы и времени рендеринга) может быть не использовать обычный <script> -tag per se, а динамически запускать загрузку script асинхронно.

Есть несколько разных методов, но наиболее прямолинейным является использование document.createElement( "script" ) при срабатывании события window.onload. Затем script загружается первым, когда сама страница была отображена, что не влияет на время, когда пользователю приходится ждать появления страницы.

Это, естественно, требует, чтобы сам script не нужен для рендеринга страницы.

Для получения дополнительной информации см. статью "Сцепление асинхронных скриптов" от Steve Souders (создатель YSlow, но теперь в Google).

Ответ 12

Зависит, если вы загружаете script, который необходим для стилизации вашей страницы/использования действий на вашей странице (например, одним нажатием кнопки), тогда лучше разместить ее сверху. Если ваш стиль составляет 100% CSS, и у вас есть все варианты возврата для действий кнопки, вы можете поместить его внизу.

Или лучше всего (если это не проблема), вы можете сделать модульную загрузочную коробку, поместить свой javascript внизу своей страницы и заставить ее исчезнуть при загрузке последней строки вашего script. Таким образом, вы можете избежать использования пользователями действий на вашей странице перед загрузкой скриптов. А также избегайте неправильного стиля.

Ответ 13

Если вы все еще много заботитесь о поддержке и производительности в IE и 10, лучше ВСЕГДА сделать ваши теги script последними тегами вашего тела HTML. Таким образом, вы уверены, что остальная часть DOM была загружена, и вы не будете блокировать и рендеринг.
Если вам больше неинтересно об IE и 10, вы можете поместить свои сценарии в начало своего документа и использовать defer, чтобы убедиться, что они запускаются только после загрузки DOM (<script type="text/javascript" src="path/to/script1.js" defer></script>). Если вы все еще хотите, чтобы ваш код работал в IE < 10, не забудьте обернуть свой код в window.onload даже, хотя!

Ответ 14

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

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

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

Ответ 15

Script блокирует загрузку DOM до ее загрузки и выполнения.

Если вы размещаете скрипты в конце <body>, все DOM имеют возможность загружать и отображать (страница будет "отображаться" быстрее). <script> будет иметь доступ ко всем этим элементам DOM.

В другой руке, помещающей его после <body> start или above, будет выполняться script (там, где еще нет элементов DOM).

Вы включаете jQuery, что означает, что вы можете разместить его там, где хотите, и . ready()

Ответ 16

Я думаю, что это зависит от исполнения веб-страницы. Если страница, которую вы хотите отобразить, не отображается должным образом, не загружая сначала JavaScript, тогда вы должны сначала включить файл JavaScript. Но если вы можете отображать/отображать веб-страницу без первоначальной загрузки файла JavaScript, тогда вы должны поместить код JavaScript внизу страницы. Поскольку он будет эмулировать быструю загрузку страницы, и с точки зрения пользователя кажется, что эта страница загружается быстрее.

Ответ 17

Вы можете разместить большинство ссылок <script> в конце <body>,
Но если на вашей странице есть активные компоненты, которые используют внешние скрипты,
то их зависимость (js файлы) должна появиться до этого (в идеале в теге head).

Ответ 18

Лучшее место для размещения <script> - перед закрытием </body>, поэтому его загрузка и выполнение не блокируют браузер для анализа HTML в документе,

Кроме того, внешняя загрузка js файлов имеет свои преимущества: кеширование в браузерах, ускорение загрузки страниц, разделение кода HTML и JavaScript и более эффективное управление базой кода.

но современные браузеры также поддерживают некоторые другие оптимальные способы, такие как async и defer для загрузки внешних файлов javascript.

Асинхронный и отложенный

Обычно выполнение HTML-страницы начинается построчно. При обнаружении внешнего элемента JavaScript синтаксический анализ HTML останавливается до тех пор, пока JavaScript не будет загружен и готов к выполнению. Это нормальное выполнение страницы можно изменить с помощью атрибутов defer и async.

`Defer`

Когда используется атрибут defer, JavaScript загружается параллельно с разбором HTML, но будет выполняться только после полного разбора HTML.

<script src="/local-js-path/myScript.js" defer></script>

`Async`

Когда используется асинхронный атрибут, JavaScript загружается, как только сценарий встречается, и после загрузки он будет выполняться асинхронно (параллельно) вместе с анализом HTML.

<script src="/local-js-path/myScript.js" async></script>

Когда использовать какие атрибуты

Если ваш скрипт не зависит от других скриптов и является модульным, используйте async.
Если вы загружаете script1 и script2 с помощью async, оба будут работать
параллельно с разбором HTML, как только они будут загружены
и доступно.
Если ваш скрипт зависит от другого скрипта, используйте defer для обоих:
Когда script1 и Скрипт2 загружаются в указанном порядке с defer, то script1 гарантированно выполнить первый,
Тогда script2 будет выполняться после того, как script1 будет полностью выполнен.
Это необходимо сделать, если script2 зависит от script1.
Если ваш скрипт достаточно мал и зависит от другого скрипта типа async используйте ваш скрипт без атрибутов и поместите его над всеми async скриптами.

ссылка: знаниеhills.com

Ответ 19

Скрипты можно размещать в разделе HTML или в разделе HTML-страницы или в обоих.

<head>
<script></script>
</head>
or here
<body>
<script></script>
</body>

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

Blockquote

Ответ 20

Прежде всего, чтобы представить мою диаграмму и понять объяснение, вы должны знать этот цвет, что относится

вы должны поместить их в конец тела перед закрытием тега (body), это поможет вам игнорировать любую ошибку

<body>
  <script></script>
</body>

но вы можете поместить их перед тегом закрытия головы,

<head>
  <script></script>
</head>

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

Пауза в разборе документа.
Сделайте запрос на получение файла.
Выполните скрипт после его загрузки.
Возобновите разбор документа.

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

1. Первый атрибут

Асинхронизация. Когда вы добавляете атрибут асинхронности в тег сценария, произойдет следующее.

 <script src="myfile1.js" async></script>
 <script src="myfile2.js" async></script>

Делайте параллельные запросы для получения файлов.
Продолжайте анализ документа, как если бы он никогда не прерывался.
Выполните отдельные сценарии в момент загрузки файлов.

Самое замечательное в этом потоке заключается в том, что скрипты могут загружаться параллельно во время анализа документа. Но есть предостережение в отношении этого и третьего пункта - скрипт будет выполнен в тот момент, когда он будет загружен. Это может быть не проблема, если скрипт полностью автономен. Однако во многих ситуациях сценарии могут зависеть от других сценариев, которые выполнили некоторую инициализацию, прежде чем они смогут выполняться. например, плагины jquery требуют, чтобы переменная jquery уже существовала на странице.

ВНИМАНИЕ: Сценарии, которые вы программно вставляете в DOM, являются асинхронными по умолчанию, если вы явно не установили для их атрибута async значение false во время вставки.

Второй атрибут

Defer: Defer очень похож на асинхронный с одним существенным отличием. Вот что происходит, когда браузер встречает скрипт с атрибутом defer.

<script src="myfile1.js" defer></script>
<script src="myfile2.js" defer></script>

Делайте параллельные запросы для извлечения отдельных файлов.
Продолжайте анализ документа, как если бы он никогда не прерывался.
Завершите анализ документа, даже если загружены файлы сценариев.
Выполните каждый сценарий в том порядке, в котором они встречались в документе.

Как вы можете сказать, defer - это почти то, что вы хотите сделать в своих файлах. Тем не менее, из-за ограниченной поддержки браузера, это не жизнеспособный вариант на момент написания. ВНИМАНИЕ: Атрибуты async и defer игнорируются для сценариев, не имеющих атрибута src.

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

Если скрипт является модульным и не использует скрипты, используйте
асинхронный.
Если скрипт использует другой сценарий или использует его, используйте defer.
Если скрипт небольшой и на него опирается асинхронный скрипт, используйте встроенный скрипт без атрибутов, размещенных над асинхронными скриптами.

Ответ 21

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

В таком случае код Javascript (и я имею в виду исполняемый код, такой как console.log("foo"), а не определение function bar() {...} такое как function bar() {...}), определенный внутри <header>...</header> будет только извиниться Но код, определенный внутри <body>...</body>, будет запускаться КАЖДОЕ ВРЕМЯ, когда часть страницы загружается AJAX.

До сих пор я не мог найти каноническое объяснение этому поведению, поэтому я просто документирую свои собственные выводы здесь. Если вы знаете, что мои выводы не верны или не полны, пожалуйста, оставьте источник комментариев в комментариях. Я весь во внимании.

Ответ 22

До конца тега тела, чтобы предотвратить и блокирование пользовательского интерфейса.

Ответ 23

В конце HTML-документа

Таким образом, это не повлияет на загрузку HTML-документа в браузере во время выполнения.

Ответ 24

Мне больше смысла включать script после HTML. Поскольку большую часть времени мне нужен Dom для загрузки, прежде чем я выполнил свой script. Я мог бы поместить его в главный тег, но мне не нравятся все накладные расходы загрузчика документа. Я хочу, чтобы мой код был коротким, сладким и легким для чтения.

Я слышал, что старые версии сафари были quarky при добавлении вашего script за пределами основного тега, но я говорю, кто заботится. Я не знаю, чтобы кто-нибудь использовал этот старый дерьмо.

Хороший вопрос кстати.

Ответ 25

лучшее место, чтобы написать свой код JavaScript в конце кода документа после тега, чтобы загрузить документ, а затем выполнить код js. и если вы пишете код JQuery напишите

$(document).ready(function(){

//your code here...

});

Ответ 26

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

ситуация такова:

Линейная загрузка страницы "сверху вниз", поэтому, если вы поместите script в голову, она начнет загружаться раньше всего, теперь, если вы поместите ее внутри тела, смешанного с кодом, может вызвать страницу загружает неприглядный образ.

определить хорошую практику не зависит от того, где.

чтобы поддержать вас, я упомянул следующее:

вы можете разместить:

и страница будет загружаться линейно

загружается асинхронно с другим контентом

содержимое страницы загрузится до и после завершения загрузки скриптов.

Хорошая практика здесь будет, когда будет реализовывать каждый?

Надеюсь, что я был полезен, все просто ответила на эту проблему.