async 和 defer 的区别

Posted 2020-10-30 是紫伦呀

　　摘自：

　　　　https://blog.csdn.net/liuhe688/article/details/51247484

　　　　https://segmentfault.com/q/1010000000640869

　　　　https://www.cnblogs.com/leungUwah/p/6480868.html

 

---

 

async 和defer 的区别

在开发中我们可以在script中声明两个不太常见的属性：defer和async，下面分别解释了他们的用法： 

defer：用于开启新的线程下载脚本文件，并使脚本在文档解析完成后执行。 
async：html5新增属性，用于异步下载脚本文件，下载完毕立即解释执行代码。 

 

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

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

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

然后从实用角度来说呢，首先把所有脚本都丢到 </body> 之前是最佳实践，因为对于旧浏览器来说这是唯一的优化选择，此法可保证非脚本的其他一切元素能够以最快的速度得到加载和解析。

 

关于DOMContentLoaded 的拓展知识：

DOMContentLoaded和load的区别：它们都是页面加载的时候触发的事件。区别在于触发的时机不一样。

浏览器渲染页面DOM文档加载的步骤：

1.解析HTML结构。

2.加载外部脚本和css文件。

3.解析并执行脚本代码。

4.DOM树构建完成。(此时会触发DOMContentLoaded事件)

5.加载外部图片等文件。

6.页面加载完毕。(此时会触发load事件)