正在运行的脚本标记是否会阻止其他脚本标记的下载

Do running script tags block other script tags from downloading?

本文关键字：脚本 其他 下载 是否 运行      更新时间：2023-09-26

这是来自 HTML5 样板中的索引.html，就在 </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>

我知道脚本标签会阻止并行下载，这就是为什么建议将它们放在底部的原因。

我的问题：浏览器真的在开始下载plugins.js然后下载script.js之前，真的要等待jQuery完全下载并执行吗？

还是提前查看并尽快(并行(开始下载所有脚本，并延迟每个脚本的执行，直到前一个脚本完成执行？

我的问题：浏览器真的要等jQuery完全下载并执行后，才开始下载plugins.js，然后下载script.js？

它可能会也可能不会，但可能不会;浏览器尝试(在限制范围内(并行化下载以使页面加载速度更快。

还是提前查看并尽快(并行(开始下载所有脚本，并延迟每个脚本的执行，直到前一个脚本完成执行？

对，因为该部分是规范所必需的(在async或defer属性的缺失中(。正如您的示例所示，在脚本运行之前，它甚至不一定能确定脚本的运行顺序，因为脚本可能会插入另一个脚本。但它可以下载它们并准备好它们。

我发现这个细节更合适的答案，从下面复制的内容 http://www.html5rocks.com/en/tutorials/speed/script-loading/参考它以获取更多详细信息。

啊，幸福的简单。在这里，浏览器将并行下载两个脚本并尽快执行它们，保持它们的顺序。"2.js"在"1.js"执行(或未能执行(之前不会执行，"1.js"在执行上一个脚本或样式表之前不会执行，等等。

不幸的是，在所有这些发生时，浏览器会阻止页面的进一步呈现。这是由于来自"网络的第一个时代"的 DOM API，它允许将字符串附加到解析器正在咀嚼的内容上，例如 document.write。较新的浏览器将继续在后台扫描或解析文档，并触发下载可能需要的外部内容(js，图像，css等(，但渲染仍然被阻止。

这就是为什么性能世界的伟大和善良建议将脚本元素放在文档的末尾，因为它会阻止尽可能少的内容。不幸的是，这意味着浏览器在下载所有HTML之前看不到您的脚本，并且此时它开始下载其他内容，例如CSS，图像和iframe。现代浏览器足够聪明，可以优先考虑JavaScript而不是图像，但我们可以做得更好。

HTML5规范说：

如果两个属性 [即异步和延迟] 都不存在，则获取脚本并 在用户代理继续解析 页。

如果未解析页面，则用户代理无法知道需要获取哪些后续资源，因此严格符合要求的浏览器应该无法获取更多资源，直到第一个资源实际执行。

要了解为什么这有意义，请假设第一个脚本包含

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

如果没有匹配的注释闭包，则标记中脚本后面的所有内容都将成为注释的一部分，直到遇到下一个-->。这可能会导致跳过一个或多个资源引用。

相关文章：