相关疑难解决方法(0)

我有一些<script>元素,其中一些元素依赖于其他<script>元素中的代码.我看到这个defer属性可以在这里派上用场,因为它允许在执行时推迟代码块.

为了测试它我在Chrome上执行了这个:http://jsfiddle.net/xXZMN/.

<script defer="defer">alert(2);</script>
<script>alert(1)</script>
<script defer="defer">alert(3);</script>

但是,它提醒2 - 1 - 3.为什么不提醒1 - 2 - 3？

我一直在为我的一个项目的HEAD部分中使用的外部脚本添加defer属性.我查询了多个延迟脚本标签的执行顺序.

以下是我的观察,这将有助于我们更好地理解我的查询:

根据http://www.w3.org/TR/html5/scripting-1.html

如果存在defer属性,则在页面完成解析时执行脚本

defer属性确实有效.但是,我怀疑执行顺序.在FF和Chrome上看起来有所不同.

根据我的项目:

<script defer="defer" src="{SERVER_PATH}/deps.js?1441452359"></script>
<script defer="defer" src="{SERVER_PATH}/script1.js?1440067073"></script>
<script defer="defer" src="{SERVER_PATH}/script2.js?1441451916"></script>

在这里,deps.js是大约120kb(gzip)的大文件,而script1-3的常规大小是20-50kb(gzip).

在Firefox上,延迟脚本的执行确实按照出现的顺序开始,但是没有以相同的顺序完成.除非前一个脚本完成执行,否则在chrome上,下一个脚本的执行不会启动.Chrome看起来很有意义.

为了测试执行顺序,我在每个脚本的第一行和最后一行插入了console.log,例如在deps.js中

console.log("Execution Start: deps");
// minified deps script content.
console.log("Execution End: deps");

在Firefox上的控制台输出下方:

Execution Start: deps
Execution Start: script1
Execution Start: script2
// Script Error as script1 needs deps to render completely.
// Script Error as script2 needs deps to render completely.
Execution End: deps

在Chrome上的控制台输出下方:

Execution Start: deps
Execution End: deps
Execution Start: script1
Execution End: script1
Execution Start: script2
Execution …