我一直在为我的一个项目的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 …