script 的三种加载方式 (async, defer)

本节目标：理解“script 的三种加载方式 (async, defer)”的核心思路，并能把它用于实际开发或面试表达。 发布于2022-02-25 17:19:17阅读 2630 Note JS 的加载分为两个部分：下载和执行。 浏览器在执行 HTML 的时候如果遇到==<script>==时会停止页面的渲染，去下载和执行 js 的文件直接遇见==</scirpt>==会继续渲染页面。故浏览器在执行 js 文件的时候浏览器表现为一片空白，为了解决这个问题 ECMAScript 定义了 defer 和 async 两个属性用于控制 JS 的下载和执行。 不带任何属性 同步模式，又称阻塞模式，我们平时使用的最多的一种方式。当浏览器解析到==<script>==标签时，浏览器会停止解析其后的内容，而优先下载脚本文件，并执行其中的代码，是个同步阻塞的过程。 一般建议把==<script>==标签放在==<body>==结尾处，这样尽可能减少页面阻塞。 而如果想要异步执行 script，则可以给其加上 async 或 defer 属性。

| |

1

<script>

defer defer 属性在 HTML 解析期间异步下载文件，并且只在 HTML 解析完成后才执行它。对于 defer，我们可以理解是将外链的 js 放在了页面底部。js 的加载不会阻塞页面的渲染和资源的加载。不过 defer 会按照原本的 js 的顺序执行，所以如果前后有依赖关系的 js 可以放心使用。

| |

1

<script defer>

async async 属性会在 HTML 解析期间异步下载文件，并在完成下载后立即暂停 HTML 解析器去执行 script 中的代码。在执行过程中浏览器处于阻塞状态，响应不了任何需求。如果 js 前后有依赖性，用 async**，就很有可能出错。**

| |

1

<script async>

**区别**
**相同点**

加载文件时不阻塞页面渲染

对于 inline 的 script 无效（只适用有==src==的外部 js）

使用这两个属性的脚本中不能调用 document.write 方法

有脚本的 onload 的事件回调

**区别点**

html4.0 中定义了 defer；html5.0 中定义了 async

浏览器支持不同

每一个 async 属性的脚本都在它下载结束之后立刻执行，同时会在 window 的 load 事件之前执行。所以就有可能出现脚本执行顺序被打乱的情况；每一个 defer 属性的脚本都是在页面解析完毕之后，按照原本的顺序执行，同时会在 document 的 DOMContentLoaded 之前执行。

那么这三种方式各在什么情况下使用呢？ 通常来说，尽可能使用==async==，然后是==defer==，最后不使用属性。 并遵循以下规则：

如果脚本是模块化的，并且不依赖于任何脚本，则使用==async==。

如果脚本依赖于或依赖于另一个脚本，则使用==defer==。

如果脚本很小并且有==async==脚本依赖该脚本，则不加属性。

**兼容性**

Internet Explorer 10、Firefox、Opera、Chrome 和 Safari 支持 async 属性。

所有主流浏览器都支持 defer 属性。

> 来自

 <https://cloud.tencent.com/developer/article/1947584>