Вопрос: Где я должен помещать теги

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

Так где является подходящее место для <script>теги?

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


1132


источник


Ответы:


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

  1. Получить страницу HTML (например, index.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";
});

Поскольку ваш браузер не знает, что 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 , 90% всех браузеров поддерживают это.

откладывать

<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 , 90% всех браузеров поддерживают это. 92% поддерживают его хотя бы частично.

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

Вывод

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

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


1447



Незадолго до закрытия тега тела, как указано в

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

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

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


217



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

<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 асинхронно ,


52



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

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

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

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

36



If you are using JQuery then put the javascript wherever you find it best and use $(document).ready() to ensure that things are loaded properly before executing any functions.

On a side note: I like all my script tags in the <head> section as that seems to be the cleanest place.


19



XHTML Won't Validate if the script is anywhere other than within the head element. turns out it can be everywhere.

You can defer the execution with something like jQuery so it doesn't matter where it's placed (except for a small performance hit during parsing).


8



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

script tag should be use always before body close or Bottom in HTML file.

then you can see content of the page first before loading js file.

check this if require : http://stevesouders.com/hpws/rule-js-bottom.php


7



The conventional (and widely accepted) answer is "at the bottom", because then the entire DOM will have been loaded before anything can start executing.

There are dissenters, for various reasons, starting with the available practice to intentionally begin execution with a page onload event.


5



Depending on the script and its usage the best possible (in terms of page load and rendering time) may be to not use a conventional <script>-tag per se, but to dynamically trigger the loading of the script asynchronously.

There are some different techniques, but the most straight forward is to use document.createElement("script") when the window.onload event is triggered. Then the script is loaded first when the page itself has rendered, thus not impacting the time the user has to wait for the page to appear.

This naturally requires that the script itself is not needed for the rendering of the page.

For more information, see the post Coupling async scripts by Steve Souders (creator of YSlow but now at Google).


0



Depends, if you are loading a script that's necessary to style your page / using actions in your page (like click of a button) then you better place it on the top. If your styling is 100% CSS and you have all fallback options for the button actions then you can place it in the bottom.

Or best thing (if that's not a concern) is you can make a modal loading box, place your javascript at the bottom of your page and make it disappear when the last line of your script gets loaded. This way you can avoid users using actions in your page before the scripts are loaded. And also avoid the improper styling.


0