Определяет ли позиция тэга <script> в HTML влияет на производительность веб-страницы?

Если тег script находится выше или ниже тела на странице HTML, имеет значение для производительности веб-сайта?

И что, если использовать между этими словами:

<body>
..blah..blah..
<script language="JavaScript" src="JS_File_100_KiloBytes">
function f1() {
.. some logic reqd. for manipulating contents in a webpage
}
</script>
... some text here too ...
</body>

Или это лучше?:

<script language="JavaScript" src="JS_File_100_KiloBytes">
function f1() {
.. some logic reqd. for manipulating contents in a webpage
}
</script>
<body>
..blah..blah..
..call above functions on some events like onclick,onfocus,etc..
</body>

Или этот??

  <body>
    ..blah..blah..
    ..call above functions on some events like onclick,onfocus,etc..
<script language="JavaScript" src="JS_File_100_KiloBytes">
    function f1() {
    .. some logic reqd. for manipulating contents in a webpage
    }
    </script>
    </body>

Не нужно указывать, что все снова в теге <html>!!

Как это влияет на производительность веб-страницы при загрузке? Это правда? Какой из них лучше, либо из этих 3, либо из других, которые вы знаете?

И еще кое-что, я немного поработал над этим, из которого я пошел сюда: Лучшие практики для ускорения вашего веб-сайта, и это предполагает положить скрипты внизу, но традиционно многие люди помещают его в тег <head>, который находится выше тега <body>. Я знаю, что это НЕ правило, но многие предпочитают это так. Если вы этому не верите, просто просмотрите источник этой страницы! И скажите мне, какой лучший стиль для лучшей производительности.

Ответы

Ответ 1

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

Чтобы бороться с этой проблемой, многие разработчики решили разместить JS в нижней части HTML-страницы (перед тегом </body>). Это кажется логичным, потому что большую часть времени JS не требуется, пока пользователь не начнет взаимодействовать с сайтом. Размещение JS файлов внизу также обеспечивает прогрессивный рендеринг.

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

XHR Eval

var xhrObj = getXHRObject();
xhrObj.onreadystatechange = 
  function() { 
    if ( xhrObj.readyState != 4 ) return;
    eval(xhrObj.responseText);
  };
xhrObj.open('GET', 'A.js', true);
xhrObj.send('');

Script Элемент DOM

var se = document.createElement('script');
se.src = 'http://anydomain.com/A.js';
document.getElementsByTagName('head')
[0].appendChild(se);

Meebo Iframed JS

var iframe = document.createElement('iframe');
document.body.appendChild(iframe);
var doc = iframe.contentWindow.document;
doc.open().write('<body onload="insertJS()">');
doc.close();

Чтобы назвать несколько...

Примечание. В текущих браузерах параллельно может быть загружено не более пяти скриптов.

Для IE существует атрибут defer, который вы можете использовать так:

<script defer src="jsasset.js" type="text/javascript"></script>

При установке этот атрибут boolean дает подсказку пользовательскому агенту, который script не будет генерировать любого содержимого документа (например, нет "document.write" в javascript) и таким образом, пользовательский агент может продолжить синтаксический анализ и рендеринг.

Ответ 2

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

Script элементов внизу нет (так вы не можете), и никаких значимых страниц не осталось, поэтому не имеет значения, заблокирован ли он.

Это лучше всего зависит от относительного приоритета ~~важности~~ (который должен определяться в каждом конкретном случае) наличия JS, работающего на Vs. с рендерингом HTML.

Обратите внимание, что элемент script внизу должен содержать внутри элемент body. Поэтому это должно быть:

<script>...</script></body></html>

а не

</body><script>...</script></html>

Ответ 3

Итак, я знаю, что это старая дискуссия, но я читал об этой теме и читал другие ответы на StackOverflow...

На самом деле не имеет значения, где вы больше ставите тег jQuery:

Наконец, слово о постоянном фольклоре. Возможно, вы столкнулись часто повторяющиеся советы "всегда размещать JavaScript на в нижней части страницы перед закрывающим тегом". true, потому что веб-браузеры загружали скрипты последовательно и блокировали загрузки и рендеринга до тех пор, пока каждый script не будет завершен. Это не дольше верно; современные браузеры делают "предварительное сканирование" и начинают загрузку все сценарии параллельно, независимо от того, указаны ли они в элементе head или на внизу страницы. Внешний JavaScript часто загружается асинхронно и записывается так, что он не будет выполняться до тех пор, пока страница не будет загружена, и DOM готов. Загрузка script в элемент головы уже не плоха практика.

http://railsapps.github.io/rails-javascript-include-external.html

Ответ 4

Да, это влияет на производительность веб-страницы.

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

См. следующие примеры:

Script наверх, блокирует целую страницу: http://jsfiddle.net/jonathon/wcQqn/
Script в середине, блокирует нижнее: http://jsfiddle.net/jonathon/wcQqn/1
Script внизу, ничего не блокирует: http://jsfiddle.net/jonathon/wcQqn/3/

Вы можете увидеть эффект, который оказывает предупреждение на рендеринг остальной части страницы. Любой JavaScript, который вы разместили в верхней части страницы, будет иметь тот же эффект. В общем, лучше всего добавить что-то важное в макет вашей страницы (например, плагины меню или что-то еще). Все, что требует взаимодействия с пользователем (всплывающие обработчики) или вообще не связано с пользователем (Google Analytics), должно идти в нижней части страницы.

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

Ответ 5

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

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

Теперь кто-то, вероятно, заметит, что если вы используете async="true" в тэге script, он не будет блокироваться. Но это поддерживается только несколькими браузерами, поэтому пока не поможет общий случай.

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

Ответ 6

В первую очередь теги script, не входящие в элементы body/head, создают недопустимый HTML и даже могут вызывать некоторые исключения в некоторых браузерах.

Script теги внутри элемента head будут загружены и интерпретированы до того, как будет обработан любой HTML-код, это блокирует рендеринг HTML/CSS.

Script в нижней части тега body, не будет блокировать HTML/CSS, и поскольку вы можете играть только с DOM на DomReady, это лучшая позиция для размещения вашего JavaScript. В качестве дополнительной заметки вам даже не понадобится использовать оболочку eventReady.

В качестве альтернативы вы также можете использовать библиотеки, такие как LABJS и RequireJS, чтобы запустить ваш JavaScript из основного тега (минимальная блокировка HTML/CSS). Любые скрипты, загружаемые через любую из этих библиотек, будут выполняться в паралине HTML/CSS-рендеринга.

<head>
   <script data-main="INITSCRIPT.js" src="require.js"></script>
</head>

INITSCRIPT.js

require( [ "jQuery" , "somePlugin" ] , function(){
   $(document).ready(function(){
      $("#someId").somePlugin();   
   });
} );

В приведенном выше примере только загрузка и интерпретация require.js будут блокировать рендеринг HTML/CSS, который обычно незначителен. После чего jQuery и somePlugin будут загружены в паралели, поэтому HTML/CSS будет просто красиво.

Ответ 7

Производительность самого script определенно будет одинаковой.

Размещение важно, хотя, как объясняется в статье, которую вы связали, так как браузер будет "останавливать" (или "замораживать" ) одновременную загрузку и рендеринг страницы при ее обнаружении и загрузке содержимого тега <script>, Поэтому лучше всего позволить браузеру отобразить страницу и применить стили CSS, а затем включить ваш .js. Он будет выглядеть более гладко для пользователя.

Кроме того, включая script внизу, возможно, означает прямо перед тем, как закрыть тег <body>.

Ответ 8

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

Рассмотрим следующий пример:

<head>
 <script>document.getElementById("demo").innerHTML="hello";</script>
</head>
<body>
 <p id="demo">The content of the document......</p>
</body>

Здесь обратите внимание, что загружается script до загрузки тега DOM (или тега <p>), что вызывает сбой в script (так как getElementById не может найти элемент с именем "demo" ),

В таких случаях вы должны использовать только script только в теге body.

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

Ссылка: Подробное описание проблемы