defer和async的区别

文章来源 n͛i͛g͛h͛t͛i͛r͛e͛ 大佬的回答

先来试个一句话解释仨，当浏览器碰到 script 脚本的时候：

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

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

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

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

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

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

而后从实用角度来讲呢，首先把全部脚本都丢到 </body> 以前是最佳实践，由于对于旧浏览器来讲这是惟一的优化选择，此法可保证非脚本的其余一切元素可以以最快的速度获得加载和解析。

接着，咱们来看一张图咯：

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

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

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