javascript 阻塞

async 和 defer 属性

1. defer 属性

<script src="file.js" defer></script> 

defer属性声明这个脚本中将不会有 document.write 或 dom 修改。

浏览器将会并行下载 file.js 和其它有 defer 属性的script，而不会阻塞页面后续处理。

 

defer属性在IE 4.0中就实现了，超过13年了！Firefox 从 3.5 开始支持defer属性 。　　 

注：所有的defer 脚本保证是按顺序依次执行的。

 

 

2. async 属性

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

async属性是HTML5新增的。作用和defer类似，但是它将在下载后尽快执行，不能保证脚本会按顺序执行。它们将在onload 事件之前完成。

Firefox 3.6、Opera 10.5、IE 9 和 最新的Chrome 和 Safari 都支持 async 属性。可以同时使用 async 和 defer，这样IE 4之后的所有 IE 都支持异步加载。

 

3. 详细解释

 

<script> 标签在 HTML 4.01 与 HTML5 的区别：

• type 属性在HTML 4中是必须的，在HTML5中是可选的。
• async 属性是HTML5中新增的。
• 个别属性（xml:space）在HTML5中不支持。

 

说明：

1. 没有 async 属性，script 将立即获取（下载）并执行，然后才继续后面的处理，这期间阻塞了浏览器的后续处理。
2. 如果有 async 属性，那么 script 将被异步下载并执行，同时浏览器继续后续的处理。
3. HTML4中就有了defer属性，它提示浏览器这个 script 不会产生任何文档元素（没有document.write），因此浏览器会继续后续处理和渲染。
4. 如果没有 async 属性 但是有 defer 属性，那么script 将在页面parse之后执行。
5. 如果同时设置了二者，那么 defer 属性主要是为了让不支持 async 属性的老浏览器按照原来的 defer 方式处理，而不是同步方式。