<script>
标签。我知道这些脚本是异步加载的,但我能否期望它们按照添加的顺序被解析?我在Firefox中看到了预期的行为,但在Safari或Chrome中没有。在Chrome开发者工具和Firebug中查看文档,两者都显示如下 -
<html>
<head>
...
<script type="text/javascript" src="A.js"></script>
<script type="text/javascript" src="B.js"></script>
</head>
...
</html>
然而,从资源加载视图来看,Chrome似乎会解析服务器返回的第一个文件,而Firebug总是按照添加脚本标签的顺序加载它们,即使B先从服务器返回。我应该期望Chrome/Safari按指定顺序解析文件吗?使用的是OS X 10.6.3上的Chrome 5.0.375.29 beta。 编辑(10/5/10):当我说解析时,我的意思是执行-可以看到积极解析的许多好处-thx rikh 编辑(11/5/10):好的,所以我按照juandopazo以下的方法进行了测试。但是我添加了一些组合,包括:1.使用JavaScript将脚本元素直接添加到头部。(测试A->D)2.使用jquery的append()方法将脚本元素添加到头部。(测试E->H)3.使用jquery的getScript()方法“加载”脚本。(测试I->L)我还尝试了所有脚本标记上的“async”和“defer”属性的组合。
您可以在此处访问测试 - http://dyn-script-load.appspot.com/,并查看源代码以了解其工作原理。加载的脚本只需调用update()函数。
首先要注意的是,仅第1种和第3种方法可并行操作 - 第2种按顺序执行请求。您可以在此处查看此图表 -
图1 - 请求生命周期图 Request lifecycle Graph http://dyn-script-load.appspot.com/images/dynScriptGraph.png 有趣的是,jquery append() 方法也会阻塞 getScript() 调用 - 可以看到它们全部在 append() 调用完成后才运行,并且它们都并行运行。最后需要注意的是,jQuery append() 方法似乎会在脚本标签执行后从文档头中移除它们。只有第一种方法将脚本标签留在文档中。 Chrome 结果 结果是 Chrome 总是执行第一个返回的脚本,无论测试如何。这意味着所有测试都“失败”,除了 jQuery append() 方法。
图2 - Chrome 5.0.375.29 beta 结果
Chrome结果 http://dyn-script-load.appspot.com/images/chromeDynScript.png
Firefox结果
然而,在Firefox上,如果使用第一种方法,并且async为false(即未设置),那么脚本将可靠地按顺序执行。
图3 - FF 3.6.3 结果
FF结果 http://dyn-script-load.appspot.com/images/ffDynScript.png
请注意,Safari似乎以与Chrome相同的方式给出不同的结果,这是有道理的。
此外,我只在缓慢的脚本上延迟了500毫秒,只是为了将开始-完成时间降低。您可能需要刷新几次才能看到Chrome和Safari在所有方面都失败。
在我看来,如果没有一种方法来做到这一点,我们就无法利用并行检索数据的能力,而没有理由不这样做(如Firefox所示)。