---
title: 描述`<script>`、`<script async>`和`<script defer> `之间的差异
---

`<script>` 标签用于在网页上包含 JavaScript 。 `async` 和 `defer` 属性用于更改脚本加载和执行的方式/时机。

## 普通`<script>`

对于普通的 `<script>` 标签，在遇到它们时没有任何`async` 或 `defer`。 HTML 解析被阻止，脚本会被下载并立即执行。 脚本执行后 HTML 解析恢复。

## `<script async>`

在`<script async>`中，脚本将与 HTML 解析并行获取，并在其可用时立即执行（可能在 HTML 解析完成之前），而且不一定按照 HTML 文档中的顺序执行。 当脚本独立于页面上的任何其他脚本时使用 `async` ，比如分析。

## `<script defer>`

在`<script defer>`, 脚本将在文档已完全解析并执行时并行获取到 HTML 解析和执行， 但在 `DOMContentLoaded` 事件之前。 如果其中有多个，每个 defer 脚本都是按照它们在 HTML 文档中出现的顺序执行的。

如果脚本依赖于完全解析的 DOM，则`defer` 属性将有助于确保在执行前完全解析 HTML。

## 备注

- 一般说来， `async` 属性应该用于对页面初始化不重要且不依赖于对方的脚本。 `defer` 属性应该用于依赖于/被依赖于其他脚本的脚本。
- 没有`src`属性的脚本， `async` 和 `deleger` 属性会被忽略。
- 包含`defer'或`async'的`<script>`将被忽略，并显示 "来自异步加载的外部脚本对 document.write()的调用被忽略 "的信息。

## 参考资料

- [`<script>`: 脚本元素 | MDN](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/script#defer)
- [async vs defer 属性](https://www.growingwiththeweb.com/2014/02/async-vs-defer-attributes.html)