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

我有一些<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?

当前回答

看看谷歌开发人员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之前运行。

2016-01-20 13:01:42

其他回答

This Boolean attribute is set to indicate to a browser that the script is meant to be executed after the document has been parsed. Since this feature hasn't yet been implemented by all other major browsers, authors should not assume that the script’s execution will actually be deferred. Never call document.write() from a defer script (since Gecko 1.9.2, this will blow away the document). The defer attribute shouldn't be used on scripts that don't have the src attribute. Since Gecko 1.9.2, the defer attribute is ignored on scripts that don't have the src attribute. However, in Gecko 1.9.1 even inline scripts are deferred if the defer attribute is set.

延迟工作与chrome, firefox, ie > 7和Safari

裁判:https://developer.mozilla.org/en-US/docs/HTML/Element/script

2013-02-18 06:11:58

因为defer属性只适用于带有src的脚本标签。找到了一种方法来模拟内联脚本的延迟。使用DOMContentLoaded事件。

<script defer src="external-script.js"></script>
<script>
document.addEventListener("DOMContentLoaded", function(event) {
    // Your inline scripts which uses methods from external-scripts.
});
</script>

这是因为，DOMContentLoaded事件在延迟带属性脚本完全加载后触发。

2015-09-05 13:32:58

看看谷歌开发人员Jake Archibald在2013年写的这篇深入研究脚本加载的文章。

引用该条有关部分:

(根据这条评论，我将添加早期版本的Firefox在延迟脚本完成运行之前触发DOMContentLoaded。)

现代浏览器似乎正确地支持异步，但您需要接受脚本无序运行，并且可能在DOMContentLoaded之前运行。

2016-01-20 13:01:42

还应该注意的是，在IE<=9中，在某些情况下使用脚本延迟可能会出现问题。更多相关信息:https://github.com/h5bp/lazyweb-requests/issues/42

2013-10-10 15:32:27

defer属性是一个布尔属性。

当出现时，它指定当页面完成解析时执行脚本。

注意:defer属性仅用于外部脚本(应该仅在src属性存在时使用)。