我有几个<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？
HTML5 规范中的一些片段：http : //w3c.github.io/html/semantics-scripting.html#element-attrdef-script-async
如果 src 属性不存在，则不能指定 defer 和 async 属性。
可以使用这些属性 [async 和 defer] 选择三种可能的模式。如果存在 async 属性，则脚本将在可用时异步执行。如果 async 属性不存在但 defer 属性存在，则在页面完成解析时执行脚本。如果这两个属性都不存在，则在用户代理继续解析页面之前，将立即获取并执行脚本。
由于历史原因，这些属性的确切处理细节有些重要，涉及 HTML 的许多方面。因此，实施要求必然分散在整个规范中。下面的算法（在本节中）描述了这个处理的核心，但这些算法引用并被 HTML 中的脚本开始和结束标记的解析规则、外部内容和 XML 中的 document.write 规则所引用() 方法，脚本的处理等。
如果元素具有 src 属性，并且元素具有 defer 属性，并且该元素已被标记为“解析器插入”，并且该元素没有 async 属性：
该元素必须添加到脚本列表的末尾，当文档完成与创建该元素的解析器的 Document 相关联的解析时，这些脚本将执行。
真正的答案是：因为你不能相信 defer。
在概念上，defer 和 async 的区别如下：
async允许在后台下载脚本而不会阻塞。然后，在它完成下载的那一刻，渲染被阻止并执行该脚本。脚本执行后，渲染恢复。
defer做同样的事情，除了保证脚本按照它们在页面上指定的顺序执行，并且它们将在文档完成解析后执行。因此，某些脚本可能完成下载然后坐等稍后下载但出现在它们之前的脚本。
不幸的是，由于真正是标准的猫战，defer 的定义因规范而异，即使在最新的规范中也不能提供有用的保证。正如这里的答案和这个问题所展示的，浏览器实现 defer 的方式不同：
defer脚本乱序运行的错误。DOMContentLoaded事件延迟到defer脚本加载之后，而有些则不会。defer于<script>与内嵌代码，并没有元素src属性，有些忽略它。幸运的是，规范至少指定了异步覆盖延迟。因此，您可以将所有脚本视为异步并获得广泛的浏览器支持，如下所示：
<script defer async src="..."></script>
全球 98% 的浏览器和美国 99% 的浏览器将通过这种方法避免阻止。
（如果您需要等到文档完成解析，请收听事件DOMContentLoaded事件或使用 jQuery 的便捷.ready()功能。无论如何您都希望这样做，以便在根本没有实现的浏览器上优雅地回退defer。）
认为这个答案已经过时了。有关与较新浏览器版本相关的信息，请参阅此帖子上的其他答案。
基本上， defer 告诉浏览器在执行该脚本块中的 javascript 之前等待“直到它准备好”。通常这是在 DOM 完成加载并且 document.readyState == 4 之后
defer 属性特定于 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 遵循标准的频率比人们所承认的要多，实际上“延迟”属性是在 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：
“设置后，这个布尔属性向用户代理提供了一个提示，即脚本不会生成任何文档内容（例如，javascript 中没有“document.write”），因此，用户代理可以继续解析和呈现。”
defer只能在<script>标记中用于外部脚本包含。因此，建议在<script>-section 的 -tags 中使用<head>。
由于延迟属性仅适用于带有 src 的脚本标记。找到了一种模拟内联脚本 defer 的方法。使用 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 事件在延迟属性脚本完全加载后触发。