运行脚本标记会阻止其他脚本标记下载吗？ [英] Do running script tags block other script tags from downloading?

问题描述

这来自 index.html ，位于 HTML5 Boilerplate ，就在< / body> 标记之前：

 <！ - 位于底部的JavaScript用于快速页面加载：http://developer.yahoo.com/performance/rules.html#js_bottom  - > 
 
 <！ - 抓取Google CDN的jQuery，带有协议相对URL;如果离线回落到本地 - > 
< 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> 
 
 <！ - 脚本通过构建脚本串联和缩小 - > 
< script src =js / plugins.js>< / script> 
< script src =js / main.js>< / script> 
<！ - 结束脚本 - > 
 
 <！ - 异步Google Analytics代码片段。将UA-XXXXX-X更改为您网站的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 ？

或者它展望未来，并尽快启动所有脚本下载是否可能（并行），并延迟每个脚本的执行，直到前一个脚本执行完毕为止？ 解决方案

>

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

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

或者它展望未来，并尽快启动所有脚本下载尽可能（并行），并延迟每个脚本的执行，直到前一个脚本执行完毕为止。

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

This is from the index.html in HTML5 Boilerplate, just before the </body> tag:

<!-- 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>

I know that script tags can block parallel downloads, which is why it's recommended to put them at the bottom.

My question: Does the browser really wait for jQuery to be fully downloaded and executed before it even starts downloading the plugins.js and then the script.js?

Or does it look ahead and start all the scripts downloading as quickly as possible (in parallel), and just delay the execution of each script until the previous one has finished executing?

解决方案

My question: Does the browser really wait for jQuery to be fully downloaded and executed before it even starts downloading the plugins.js and then the script.js?

It may or may not, but probably not; browsers try (within limits) to parallelize downloads to make page loads fast.

Or does it look ahead and start all the scripts downloading as quickly as possible (in parallel), and just delay the execution of each script until the previous one has finished executing?

Right, because that part is required by the specification (in the absense of the async or defer attributes). And as your example shows, it can't even necessarily determine the order in which scripts should run until the script has run, because the script may insert another script. But it can download them and have them ready.

这篇关于运行脚本标记会阻止其他脚本标记下载吗？的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！