# script上的defer和async

[script 标签的 async 和 defer 属性](https://blog.skk.moe/post/script-async-defer/)

![](https://img.081024.xyz/swappy-20250307-160614.png)

上图描绘了一个规范定义的理想状况：

* `async` 属性即当 HTML 解析到时开始加载，然后无视 DOM、渲染、Load 事件，只要加载一完成就会开始执行。
* `defer` 属性即当 HTML 解析到时开始加载，并且会在 DOM 解析完后,  DOMContentLoaded 事件触发前执行。

对于大部分现代浏览器来说，确保异步加载的做法其实是在操作 DOM 动态插入 `<script async>` 标签：

```js
function loadScript(url, cb, isMoudule) {
  var script = document.createElement('script');
  script.src = url;
  if (cb) script.onload = cb;
  if (isMoudule) script.type = 'module';
  script.async = true;
  document.body.appendChild(script);
}
```

「[HTML Standard - 4.12.1.1 Processing Model](https://html.spec.whatwg.org/multipage/scripting.html#script-processing-model)」

![](https://img.081024.xyz/script上的defer和async-20240701154448812.jpg)