【HTML】defer 和 async 属性在 script 标签中分别有什么作用?

需要这两个属性的原因？

首先我们要知道的是，浏览器在解析 HTML 的过程中，遇到了 script 元素是不能继续构建 DOM 树的。

• 它会停止解析构建，首先去下载 js 代码，并且执行 js 的脚本；
• 只有在等到 js 脚本执行结束之后，才会继续解析 html，构建 DOM 树。

那为什么要这样做呢？

• 因为 js 的作用之一就是操作 DOM，并且可以修改 DOM；
• 如果等到 DOM 树构建完成并且渲染后再去执行 js，就会造成严重的回流和重绘，影响页面性能；
• 所以，在遇到 script 标签的时候，浏览器采取了先加载执行后构建 DOM 树的方案。

虽然是解决了回流和重绘的问题，但这又产生了新的问题！（解决一个问题产生了新的问题😂）

在现在的网页开发模式中（Vue、React），往往 js 脚本比 HTML 结构更“重”，需要加载和处理的时间更长。

这样就会导致页面的解析阻塞（在脚本完成下载、执行之前，用户在界面上什么都看不到）。

为了解决上面的问题，script 元素给我们提供了两个属性来处理：defer 和 async

defer 的作用

defer 翻译过来就是延迟的意思

defer 属性告诉浏览器不要等待脚本下载，而是继续解析 HTML、构建 DOM Tree。

• 脚本会又浏览器来进行下载，但是不会阻塞 DOMTree 的构建过程；
• 如果脚本提前下载好了，它会等待 DOM Tree 构建完成，在 DOMContentLoaded 事件之前执行 defer 中的代码。

下面举个例子：

我们创建了一个 defer.js 文件并在脚本执行的时候添加了 defer 属性，最后我们可以看到 DOMContentLoaded 会等待 defer 中的代码先执行完成。

另外我们要注意的是，多个 defer 的脚本是可以保持顺序执行的。

从某种角度来说，defer 是可以提高页面性能的，并且推荐把带有 defer 属性的 script 标签放到 heade 元素中。

async 的作用

async 翻译过来是异步的意思

async 的特性和 defer 有些类似

• 浏览器不会因为 async 脚本的下载而阻塞（和 defer 类似）
• 但是在带有 async 属性的脚本会在下载完成后立即执行，并且不能保证在 DOMContentLoaded 之前或者之后执行，我们要知道在脚本执行的时候是会阻塞 DOMTree 的构建。
• 还有就是 async 脚本是不能保证顺序的，它是独立下载、独立运行，不会等待其他脚本；

具体的执⾏时机图解

绿色-HTML 解析；黑色-停止 HTML 解析；黄色-脚本下载；棕色-脚本执行；

总结

script 标签的 defer 和 async 属性都是用来控制外部脚本的加载和执行方式的，他们对于改善页面加载非常有帮助。

但是他们的机制并不相同：

• defer 下载不会阻止 DOM 的构建，但是在 DOMTree 构建完成后，在 DOMContentLoaded 事件之前执行，并且 defer 脚本的执行是有序的。
• async 下载同样不会阻止 DOM 的构建，但是不会保证在 DOMcontentLoaded 之前或者之后执行，也不能保证顺序，它的每个脚本都是独立的。

所以他们的应用场景是这样的：

• defer 通常用于需要在文档解析后操作 DOM 的 js 代码，并且对多个脚本文件有顺序要求
• async 通常用于独立的脚本，对其他脚本，甚至对 DOM 没有依赖的脚本。

在现代化的框架开发中，已经不需要我们手动设置 async 和 defer 了，在使用脚手架的时候，一遍会根据我们需要自动加上 defer 属性，某些特殊场景下，比如第三方分析工具或者是广告追踪脚本等，需要我们自己加上 async 属性。