HTML5 defer和async的区别

在HTML页面中插入Javascript的主要方法，就是使用<script>元素。这个元素由Netscape创造并在Netscape Navigator 2中首先实现。后来，这个元素就被加入到正式的HTML规范中。HTML4.01为<script>定义了6个属性，包括defer和async。defer和async都是可选的，且只对外部脚本文件有效。

1、当浏览器解析到script脚本，没有defer或async时：

<script src="main.js"></script>

浏览器会当即加载并执行指定的脚本，“当即”指在渲染该script标签之下的文档元素以前，也就是说不等待后续载入的文档元素，读到就加载并执行。

2、当浏览器解析到script脚本，有async时：

<script async src="main.js"></script>

浏览器会当即下载脚本，但不妨碍页面中的其余操做，好比下载其余资源或等待加载其余脚本。加载和渲染后续文档元素的过程和main.js的加载与执行并行进行（异步）。

async不保证按照脚本出现的前后顺序执行，所以，确保二者以前互不依赖很是重要，指定async属性的目的是不让页面等待两个脚本的下载和执行，从而异步加载页面其余内容，建议异步脚本不要在加载期间修改DOM。

异步脚本必定会在页面的load事件前执行，但可能会在DOMContentLoaded事件触发以前或以后执行。支持异步脚本的浏览器有Firefox 3.六、Safari 5 和Chrome。

3、当浏览器解析到script脚本，有defer时：

<script defer="defer" src="main1.js"></script>
<script defer="defer"  src="main2.js"></script>

表示脚本会被延迟到文档彻底被解析和显示以后再执行，加载后续文档元素的过程将和main.js的加载并行进行（异步）。HTML5规范要求脚本按照它们出现的前后顺序执行，所以第一个延迟脚本会先于第二个延迟脚本执行，而这两个脚本会先于DOMContentLoaded事件。在现实当中，延迟脚本并不必定会按照顺序执行，也不必定会在DOMContentLoaded事件触发前执行，所以最好只包含一个延迟脚本。

IE4~IE7还支持对嵌入脚本的defer属性，但IE8以及以后的版本则彻底支持HTML5规定的行为。

IE4，Firefox 3.5，Safari 5和Chrome是最先支持defer属性的浏览器。其余浏览器胡忽略这个属性，像日常同样处理脚本，为此，把延迟脚本放在页面底部仍然是最佳选择。

下图所示：

蓝色线表明网络读取，红色线表明执行时间，这俩都是针对脚本的；绿色线表明 HTML 解析。

此图告诉咱们如下几个要点：

1. defer 和 async 在网络读取（下载）这块儿是同样的，都是异步的（相较于 HTML 解析）
2. 它俩的差异在于脚本下载完以后什么时候执行，显然 defer 是最接近咱们对于应用脚本加载和执行的要求的
3. 关于 defer，此图未尽之处在于它是按照加载顺序执行脚本的，这一点要善加利用
4. async 则是一个乱序执行的主，反正对它来讲脚本的加载和执行是牢牢挨着的，因此无论你声明的顺序如何，只要它加载完了就会马上执行
5. 仔细想一想，async 对于应用脚本的用处不大，由于它彻底不考虑依赖（哪怕是最低级的顺序执行），不过它对于那些能够不依赖任何脚本或不被任何脚本依赖的脚原本说倒是很是合适的，最典型的例子：Google Analytics

参考：

《javascript高级程序设计》

defer和async的区别 http://segmentfault.com/q/1010000000640869