我有一些<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?
更新:2/19/2016
这个答案已经过时了。有关更新的浏览器版本的信息,请参考这篇文章中的其他答案。
基本上,defer告诉浏览器在执行脚本块中的javascript之前等待“直到它准备好了”。这通常发生在DOM完成加载和文档之后。readyState == 4
延迟属性是internet explorer特有的。在Internet Explorer 8中,在Windows 7中,我在JS Fiddle测试页面中看到的结果是,1 - 2 - 3。
结果可能因浏览器而异。
http://msdn.microsoft.com/en-us/library/ms533719 (v = vs.85) . aspx
与人们普遍认为的IE遵循标准的情况相反,实际上“defer”属性是在DOM级别1规范http://www.w3.org/TR/REC-DOM-Level-1/level-one-html.html中定义的
W3C对defer的定义:http://www.w3.org/TR/REC-html40/interact/scripts.html#adef-defer:
当设置时,这个布尔属性向用户代理提供了一个提示,提示脚本不会生成任何文档内容(例如,没有“文档”。这样,用户代理就可以继续解析和渲染了。
更新:2/19/2016
这个答案已经过时了。有关更新的浏览器版本的信息,请参考这篇文章中的其他答案。
基本上,defer告诉浏览器在执行脚本块中的javascript之前等待“直到它准备好了”。这通常发生在DOM完成加载和文档之后。readyState == 4
延迟属性是internet explorer特有的。在Internet Explorer 8中,在Windows 7中,我在JS Fiddle测试页面中看到的结果是,1 - 2 - 3。
结果可能因浏览器而异。
http://msdn.microsoft.com/en-us/library/ms533719 (v = vs.85) . aspx
与人们普遍认为的IE遵循标准的情况相反,实际上“defer”属性是在DOM级别1规范http://www.w3.org/TR/REC-DOM-Level-1/level-one-html.html中定义的
W3C对defer的定义:http://www.w3.org/TR/REC-html40/interact/scripts.html#adef-defer:
当设置时,这个布尔属性向用户代理提供了一个提示,提示脚本不会生成任何文档内容(例如,没有“文档”。这样,用户代理就可以继续解析和渲染了。
看看谷歌开发人员Jake Archibald在2013年写的这篇深入研究脚本加载的文章。
引用该条有关部分:
Defer
<script src="//other-domain.com/1.js" defer></script>
<script src="2.js" defer></script>
Spec says: Download together, execute in order just before DOMContentLoaded. Ignore “defer” on scripts without “src”.
IE < 10 says: I might execute 2.js halfway through the execution of 1.js. Isn’t that fun??
The browsers in red say: I have no idea what this “defer” thing is, I’m going to load the scripts as if it weren’t there.
Other browsers say: Ok, but I might not ignore “defer” on scripts without “src”.
(根据这条评论,我将添加早期版本的Firefox在延迟脚本完成运行之前触发DOMContentLoaded。)
现代浏览器似乎正确地支持异步,但您需要接受脚本无序运行,并且可能在DOMContentLoaded之前运行。
<脚本延迟> -
只要浏览器使用defer与脚本标记进行交互
它开始获取脚本文件,同时还并排解析HTML。
在这种情况下,脚本只在HTML解析完成后执行。
<脚本async> -
当浏览器与async交互脚本标记时
它在并排解析HTML时开始获取脚本文件。
但是在完全获取脚本时停止HTML解析,然后开始执行脚本,之后继续进行HTML解析。
<脚本> - - -
只要浏览器与脚本标记交互
它停止HTML的解析,获取脚本文件,
在本例中,执行脚本,然后继续解析HTML。