js异步加载详解

同步加载

<script src="http://yourdomain.com/script.js"></script>

这是大家熟知的js加载方式，这种方式是同步模式，又称阻塞模式，会阻止浏览器的后续处理，停止了后续的解析，因此停止了后续的文件加载（如图像）、渲染、代码执行。

js 之所以要同步执行，是因为 js 中可能有输出 document 内容、修改dom、重定向等行为，所以默认同步执行才是安全的。

这就是为什么一般建议是把

异步加载

既然有同步那必然就会有异步，js加载的异步是什么样的呢，看代码

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

以上两种都是异步，特别之处就是加了defer和async属性。

defer和async的区别在于：

async 脚本在script文件下载完成后会立即执行,并且其执行时间一定在 window的load事件触发之前。这意味着多个async脚本很可能不会按其在页面中的出现次序顺序执行。

defer执行时机为DOM解析完成后，document的DOMContentLoaded事件触发之前。浏览器确保多个 defer 脚本按其在HTML页面中的出现顺序依次执行。

值得注意的是

在异步加载的时候，无法使用 document.write 输出文档内容。 在同步模式下，document.write 是在当前 script所在的位置输 出文档的。

而在异步模式下，浏览器继续处理后续页面内容，根本无法确定 document.write 应该输出到什么位置，所以异步模式下 document.write 不可行。

而到了页面已经 onload 之后，再执行 document.write 将导致当前页面的内容被清空，因为它会自动触发 document.open 方法。

参考

http://www.cnblogs.com/rik28/p/5950190.html

http://blog.csdn.net/renfufei/article/details/10210949