运行脚本标签是否会阻止其他脚本标签的下载？

Question

这是来自 索引.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/ 推荐它有更多详细信息。

Answer 3

HTML5 规范说：

如果两个属性都没有[即存在异步和递延]，然后在用户代理继续解析页面之前，立即获取和执行脚本。

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

要了解为什么这是有意义的，想象一下第一个脚本包含

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

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