Блокируют ли запущенные теги скриптов загрузку других тегов скриптов?

Question

Это из index.html в Шаблон HTML5, непосредственно перед началом </body> тег:

<!-- JavaScript at the bottom for fast page loading: http://developer.yahoo.com/performance/rules.html#js_bottom -->

<!-- Grab Google CDN's jQuery, with a protocol relative URL; fall back to local if offline -->
<script src="//ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js"></script>
<script>window.jQuery || document.write('<script src="js/vendor/jquery-1.7.2.min.js"><\/script>')</script>

<!-- scripts concatenated and minified via build script -->
<script src="js/plugins.js"></script>
<script src="js/main.js"></script>
<!-- end scripts -->

<!-- Asynchronous Google Analytics snippet. Change UA-XXXXX-X to be your site's ID.
     mathiasbynens.be/notes/async-analytics-snippet -->
<script>
  var _gaq=[['_setAccount','UA-XXXXX-X'],['_trackPageview']];
  (function(d,t){var g=d.createElement(t),s=d.getElementsByTagName(t)[0];
  g.src=('https:'==location.protocol?'//ssl':'//www')+'.google-analytics.com/ga.js';
  s.parentNode.insertBefore(g,s)}(document,'script'));
</script>

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

Мой вопрос: Действительно ли браузер ожидает полной загрузки и выполнения jQuery, прежде чем он даже начнет загрузку plugins.js и тогда script.js?

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

Answer 1

Мой вопрос:Действительно ли браузер ждет полной загрузки и выполнения jQuery, прежде чем он даже начнет загрузку? plugins.js а затем script.js?

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

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

Верно, потому что эта часть требуется по спецификации (при отсутствии async или defer атрибуты).И, как показывает ваш пример, он даже не может обязательно определить порядок, в котором должны выполняться сценарии, пока сценарий не запустится, поскольку сценарий может вставить другой сценарий.Но он может загрузить их и подготовить.

Answer 2

Я нашел эту информацию более подходящим ответом на этот вопрос, скопированным ниже из содержания. http://www.html5rocks.com/en/tutorials/speed/script-loading/ обратитесь к нему для получения более подробной информации.

<script src="//other-domain.com/1.js"></script>

<script src="2.js"></script>

Ох, блаженная простота.Здесь браузер параллельно загрузит оба скрипта и выполнит их в кратчайшие сроки, сохраняя их порядок.«2.js» не будет выполняться до тех пор, пока «1.js» не выполнится (или не сможет этого сделать), «1.js» не будет выполняться до тех пор, пока не будет выполнен предыдущий скрипт или таблица стилей и т. д. и т. п.

К сожалению, браузер блокирует дальнейший рендеринг страницы, пока все это происходит.Это связано с API-интерфейсами DOM из «первой эпохи Интернета», которые позволяют добавлять строки к содержимому, обрабатываемому парсером, например document.write.Новые браузеры будут продолжать сканировать или анализировать документ в фоновом режиме и запускать загрузку внешнего контента, который может ему понадобиться (js, изображения, css и т. д.), но рендеринг по-прежнему блокируется.

Вот почему великие и хорошие представители мира производительности рекомендуют размещать элементы сценария в конце документа, поскольку они блокируют как можно меньше контента.К сожалению, это означает, что ваш скрипт не виден браузеру до тех пор, пока он не загрузит весь ваш HTML, и к этому моменту он не начнет загружать другой контент, такой как CSS, изображения и iframe.Современные браузеры достаточно умны, чтобы отдавать приоритет JavaScript над изображениями, но мы можем добиться большего.

Answer 3

Спецификация HTML5 гласит:

Если ни один из атрибутов [т.е.присутствует функция async и defer], затем извлекается скрипт и выполняется немедленно, прежде чем пользовательский агент продолжит синтаксический анализ страницы.

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

Чтобы понять, почему это имеет смысл, представьте, что первый скрипт содержит

document.write("<!--"); 

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