<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?

当前回答

延迟只能在<script>标记中用于外部脚本包含。因此，建议在<head>-section中的<script>-标签中使用。

2013-10-16 06:43:55

其他回答

因为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年写的这篇深入研究脚本加载的文章。

引用该条有关部分:

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

延迟只能在<script>标记中用于外部脚本包含。因此，建议在<head>-section中的<script>-标签中使用。

2013-10-16 06:43:55

defer属性是一个布尔属性。

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

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

注意:有几种方式可以执行外部脚本:

如果出现async:脚本将与页面的其余部分异步执行(在页面继续解析时将执行脚本) 如果async不存在，而defer存在:当页面完成解析时执行脚本如果async和defer都不存在:在浏览器继续解析页面之前，立即获取并执行脚本

2016-07-01 12:37:49

更新:2/19/2016