script标签中defer和async的区别

Posted 2021-02-18 7ezreal

大家在平时编译前端代码的时候经常会看到_<script>标签里带有defer或者async属性，那么长话简说在这里介绍一下这两个属性的作用。

---

同步加载

正常的html加载解析顺序是同步进行的，也就是浏览器加载html成功之后开始解析文档，这个时候如果遇到script文件就会暂停解析html文档，而下载script文件并加以解析，当解析完成后再开始继续解析html文档。

defer

defer是一个异步加载属性，当html解析进程中，遇到带有该属性的script标签，就会异步加载该js文件，而不会中断html文档的解析，当整个html解析完成后，回过头来再解析该js文件。

async

async也是一个异步加载属性，不同的是，当html解析过程中遇到此属性的js文件，会异步下载该文件而不会停止解析html文档，但是当该文件加载完成，会立即解析，在解析过程中，html文档自身则会暂停解析直到该js文件解析完毕，再继续解析html文档。