JavaScript延迟脚本之async和defer的区别

JavaScript延迟脚本之async和defer的区别

defer和async都是<script>标签的属性，属于HTML4的规范，作用是延迟加载脚本和异步执行JS代码。

defer属性

浏览器在解析HTML文档时，如果遇到有defer属性的<script>标签，会立即下载该文件，下载的同时不阻塞HTML的解析与渲染，一旦页面解析和渲染完毕，就会执行该文件。

在HTML5的规范中，规定了多个带有defer属性的<script>标签在执行时按照在页面中的先后顺序来执行，并且执行的时机是在页面的DomContentLoaded()事件之前。
但是在现实中，多个defer属性并不一定按照顺序执行，也不一定是在DomContentLoaded事件之前执行（各个浏览器之间实现可能各不一样）。

async属性

浏览器在解析HTML文档时，如果遇到带有async属性的<script>标签，会立即下载该文件，下载的同时不阻塞HTML的解析和渲染，一旦该文件下载完成，则停止解析HTML并且执行该文件，文件执行完毕后，继续解析HTML。

当页面中有多个带有async属性的<script>标签时，它们的执行顺序不是按照页面顺序来执行，而是无论任意一个文件先下载完成，则此文件先执行。

另外，不建议在该文件中修改HTML结构，因为此时文档可能还在加载中。

---

defer和async属性只能用于引入外部文件的<script>标签中，否则会被忽略。

如果一个<script>标签同时拥有defer和async属性，则defer属性会被忽略。

这两个属性显著的区别就是:

• 带有defer属性的<script>标签执行顺序是一致的，并且是在HTML渲染完毕后才执行。
• 带有async属性的<script>标签执行顺序是不固定的，并且只要文件下载完成就执行，不论HTML是否以渲染完成。