我有几个<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中脚本开始和结束标记的解析规则、foreign content和XML以及document.write()方法的处理等所引用和引用。
如果元素具有src属性，并且元素具有defer属性，并且已将元素标记为“parser-inserted”，并且元素没有async属性：
必须将该元素添加到由创建元素的解析器关联的文档的解析完成时将执行的脚本列表的末尾。
defer的方式不好。如果使用defer，在某些浏览器中不能保证脚本文件按顺序执行。 - Flimm真正的答案是：因为你不能信任defer。
从概念上讲，defer和async的区别如下：
async允许脚本在后台下载而不阻塞。然后，在它完成下载时，渲染被阻塞，并且该脚本执行。当脚本执行完毕后，渲染恢复。
defer也是同样的操作，但它声称保证按照页面上指定的顺序执行脚本，并且这些脚本将在文档解析完成后执行。因此，一些脚本可能会在下载完成后等待后面下载但出现在它们之前的脚本。
不幸的是，由于标准之间的争执，defer的定义因规范而异，即使在最近的规范中也没有提供有用的保证。正如这里和这个问题所示，浏览器以不同的方式实现defer：
defer脚本按顺序运行。DOMContentLoaded事件，直到defer脚本加载完成，而另一些则不会。src属性的<script>元素上的defer，而其他一些则会忽略它。幸运的是，规范至少指定了async覆盖defer。因此，您可以将所有脚本视为async，并获得广泛的浏览器支持，如下所示：
<script defer async src="..."></script>
使用这种方法，全球98%的浏览器和美国99%的浏览器都可以避免阻止。
（如果您需要等待文档解析完成，请监听事件DOMContentLoaded或使用jQuery方便的.ready()函数。无论如何，您都希望在不实现defer的浏览器上优雅地回退。）
defer 和 async？难道我们不应该只使用其中一个吗？请详细说明 :) - Vikas Bansal考虑到这个答案已经过时，请参考本帖子中其他答案以获取更适用于较新浏览器版本的信息。
基本上，defer告诉浏览器在执行脚本块中的JavaScript之前“等待”。“通常，在DOM完成加载且document.readyState == 4之后进行此操作。
Defer属性仅适用于Internet Explorer。 在Windows 7上的Internet Explorer 8中，您在JS Fiddle测试页面中看到的结果为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”），因此，用户代理可以继续解析和呈现。”
defer 只能用于包含外部脚本的 <script> 标签中，因此建议将其用于位于 <head> 部分的 <script> 标签中。
由于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>
defer 属性仅适用于外部脚本（仅在 src 属性存在时使用）。
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会在defer脚本运行完成之前触发DOMContentLoaded事件，根据这篇评论。）
现代浏览器似乎已经支持async了，但是你需要接受脚本可能在DOMContentLoaded事件之前无序地运行。
script defer时，IE<=9可能会出现问题。更多信息请查看：https://github.com/h5bp/lazyweb-requests/issues/42。<script defer> -
当浏览器与带有defer属性的脚本标签交互时，
<script async> —
当浏览器与带有async属性的脚本标签交互时，
<script> —
当浏览器与脚本标签交互时，
src时defer才是有效的。这可能是你的示例在大多数浏览器中未能按预期工作的原因。 - Pankrat