首页
学习
活动
专区
圈层
工具
发布
首页
学习
活动
专区
圈层
工具
MCP广场
社区首页 >问答首页 ><script defer="defer">到底是如何工作的?

<script defer="defer">到底是如何工作的?
EN

Stack Overflow用户
提问于 2011-03-10 02:29:32
回答 10查看 123.5K关注 0票数 212

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

为了测试它,我在Chrome上执行了以下代码:http://jsfiddle.net/xXZMN/

代码语言:javascript
运行
复制
<script defer="defer">alert(2);</script>
<script>alert(1)</script>
<script defer="defer">alert(3);</script>

但是,它会向2 - 1 - 3发出警报。它为什么不提醒1 - 2 - 3

EN

回答 10

Stack Overflow用户

回答已采纳

发布于 2011-03-10 03:09:19

更新日期: 2/19/2016

认为这个答案已经过时了。有关较新浏览器版本的相关信息,请参阅本文的其他答案。

基本上,defer告诉浏览器在执行该脚本块中的javascript之前等待“直到它准备好了”。通常,这是在DOM完成加载并且document.readyState == 4之后

defer属性特定于internet explorer。在Internet Explorer8中,在Windows7上,我在你的JS小提琴测试页面中看到的结果是1-2- 3。

不同浏览器的结果可能会有所不同。

http://msdn.microsoft.com/en-us/library/ms533719(v=vs.85).aspx

与流行的观点相反,IE更多地遵循标准,而不是人们所透露的那样,实际上,"defer“属性是在DOM Level 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定义

“设置时,此布尔属性向用户代理提供提示:脚本不会生成任何文档内容(例如,javascript中没有"document.write”),因此,用户代理可以继续解析和呈现。“

票数 54
EN

Stack Overflow用户

发布于 2011-03-10 03:36:12

下面是来自HTML5规范的几个片段:http://w3c.github.io/html/semantics-scripting.html#element-attrdef-script-async

如果

属性不存在,则不能指定defer和async属性。

使用这些属性async和defer可以选择三种可能的模式。如果存在async属性,则脚本将在可用时立即异步执行。如果不存在async属性,但存在defer属性,则在页面完成解析时执行脚本。如果这两个属性都不存在,则在用户代理继续解析页面之前,将立即获取并执行脚本。

由于历史原因,这些属性的确切处理细节在某种程度上不是微不足道的,涉及

的许多方面。因此,实现需求必然分散在整个规范中。下面的算法(在本节中)描述了该处理的核心,但是这些算法引用了HTML、外来内容和XML中的脚本开始和结束标记的解析规则、document.write()方法的规则、脚本的处理等。

如果元素具有src属性,元素具有defer属性,并且元素已被标记为"parser-inserted",而元素没有async属性,则为

必须将元素添加到脚本列表的末尾,当文档完成与创建该元素的解析器的文档相关联的解析时,将执行该脚本。

票数 168
EN

Stack Overflow用户

发布于 2012-05-24 12:37:22

真正的答案是:因为你不能相信defer。

在概念上,延迟和异步的区别如下:

async允许在后台下载脚本而不会阻塞。然后,一旦它完成下载,渲染就会被阻止,该脚本就会执行。执行完脚本后,渲染将恢复。

defer做了同样的事情,只是声明保证脚本按照它们在页面上指定的顺序执行,并且它们将在文档解析完成后执行。因此,一些脚本可能会完成下载,然后坐下来等待后来下载但出现在他们之前的脚本。

不幸的是,由于真正的标准争斗,defer的定义因规格而异,甚至在最新的规格中也没有提供有用的保证。正如answers herethis issue演示的那样,浏览器以不同的方式实现defer:

  • 在某些情况下,某些浏览器存在导致defer脚本无序运行的错误。
  • 某些浏览器会将DOMContentLoaded事件延迟到defer脚本加载之后,而有些浏览器则不会。
  • 某些浏览器对具有内联代码但没有属性的<代码>D16元素遵守defer,而有些浏览器则忽略它。

幸运的是,该规范至少指定了异步覆盖延迟。因此,您可以将所有脚本视为异步,并获得广泛的浏览器支持,如下所示:

代码语言:javascript
运行
复制
<script defer async src="..."></script>

全球98%的浏览器和美国99%的浏览器将避免使用这种方法进行屏蔽。

(如果需要等到文档解析完成,请监听事件DOMContentLoaded事件或使用jQuery方便的.ready()函数。您无论如何都希望这样做,以便在根本不实现defer的浏览器上优雅地后退。)

票数 158
EN
页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接:

https://stackoverflow.com/questions/5250412

复制
相关文章

相似问题

领券
问题归档专栏文章快讯文章归档关键词归档开发者手册归档开发者手册 Section 归档