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

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

так, где is правильное место, чтобы положить <script> теги?

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

20 ответов


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

  1. получить HTML-страницу (например, индекс.html)
  2. начать разбор HTML
  3. парсер встречает <script> тег, ссылающийся на внешний файл сценария.
  4. браузер запрашивает файл сценария. Между тем, парсер блокирует и прекращает разбор другого HTML на Вашей странице.
  5. через некоторое время скрипт скачивается и впоследствии выполненный.
  6. анализатор продолжает разбор остальной части 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";
});

Ваш браузер не не знаю моего сценария.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). Это также не блокирует браузер.

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

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

важное замечание о совместимости браузера: в некоторых случаях IE этой первая!

вывод

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

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


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

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

поместите Скрипты внизу

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


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

<script src="script.js" async></script>
<script src="script.js" defer></script>
<script src="script.js" async defer></script>
  • async скрипт будет выполняться асинхронно, как только он будет доступен
  • defer скрипт выполняется, когда документ закончил разбор
  • async defer скрипт возвращается к поведению отсрочки, если асинхронность не поддерживается

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

<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
-->

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

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

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


стандартный совет, продвигаемый Yahoo! Исключительная производительность команды, это поставить <script> теги в конце тела документа, чтобы они не блокируют рендеринг страницы.

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

есть немного большой горки Стив Саудерс (на стороне клиента барысевич ) о компании:

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

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

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


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

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


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

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

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

установите этот флажок, если требуется : http://stevesouders.com/hpws/rule-js-bottom.php


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

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


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

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

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

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


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

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


скрипт блокирует загрузку DOM, пока он не будет загружен и выполнен.

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

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

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


  • если вы все еще заботитесь о поддержке и производительности в IE

  • если вы больше не заботитесь о IEdefer чтобы убедиться, что они работают только после загрузки DOM (<script type="text/javascript" src="path/to/script1.js" defer></script>). Если вы все еще хотите, чтобы ваш код работал в IEwindow.onload даже, Однако!


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


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


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

$(document).ready (function{

//your code here

});

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

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

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


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

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


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

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

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

Blockquote


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

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

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


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

ситуация следующая:

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

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

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

вы можете:

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

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

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

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

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