Вопрос по javascript, html – Блокируют ли теги скриптов блокирование загрузки других тегов скриптов?

4

Это из Index.html в HTML5 Boilerplate, как раз перед</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?

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

Ваш Ответ

3   ответа
8

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

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

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

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

@ malthoff: "Они просто помнят порядок, в котором в документе появилась внешняя ссылка на скрипт для их выполнения после параллельной загрузки?" Правильный. И если у вас есть, скажем, пять сценариев, но не имеет значения, в каком порядке вы загружаете два из них, вы можете пометить этиasync, в этом случае (в современных браузерах) они будут оценены, как только они закончат загрузку, независимо от порядка. T.J. Crowder
Означает ли это, что лучшие практики, такие как методы асинхронной загрузки для JavaScript, сегодня менее важны в новых браузерах? Они просто помнят порядок, в котором внешняя ссылка скрипта появилась в документе, чтобы выполнить их после параллельной загрузки? Кажется, потому что, если я взгляну на панель инструментов / ресурсов разработчика chrome, то сразу начнется загрузка большого количества js-файлов, и они не будут блокироваться, как снимки экрана в книгах (например, «даже более быстрые веб-сайты»). . malthoff
"Но они могут скачать их и подготовить." Но на самом ли деле браузеры делают это? callum
@ callum: О да. Браузеры делают все возможное, чтобы их HTTP-потоки были заняты до тех пор, пока у них есть контент для захвата. Все дело в том, чтобы первым показать готовую страницу. T.J. Crowder
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, images, css и т. Д.), Но рендеринг по-прежнему блокируется.

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

1

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

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

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

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

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

Похожие вопросы