js异步加载——defer和async的区别

　　defer的用途是代表脚本在执行时不会影响页面的构造。也就是说，脚本会延迟到整个页面都解析完毕后再运行。所以，在<script>元素中设置defer属性，至关于告诉浏览器当即下载，但延迟执行。

　　async属性与defer属性相似，都用于改变处理脚本的行为。建议异步脚本不要在加载期间修改DOM。

　　defer与async的区别是：前者要等到整个页面正常渲染结束，才会执行；后者一旦下载完，渲染引擎就会中断渲染，执行这个脚本之后，再继续渲染。一句话，defer是“渲染完再执行”，async是“下载完就执行”。另外，若是有多个defer脚本，会按照它们在页面出现的顺序加载，而多个async脚本是不能保证加载顺序的。

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

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

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

有 async，加载和渲染后续文档元素的过程将和 script.js 的加载与执行并行进行（异步）。

　　3. <script defer src="myscript.js"></script>

有 defer，加载后续文档元素的过程将和 script.js 的加载并行进行（异步），可是 script.js 的执行要在全部元素解析完成以后，DOMContentLoaded 事件触发以前完成。

 

 

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

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

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