31 lines
1.7 KiB
Plaintext
31 lines
1.7 KiB
Plaintext
---
|
||
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)
|