【HTML 面经】＜script＞标签中的 defer 和 async 的区别

最新推荐文章于 2025-03-20 16:22:28 发布

Peter-Lu

最新推荐文章于 2025-03-20 16:22:28 发布

阅读量1k

点赞数 13

分类专栏： # HTML面经文章标签： html 前端 ecmascript javascript

本文链接：https://blog.youkuaiyun.com/lph159/article/details/144210181

版权

HTML面经专栏收录该内容

10 篇文章

订阅专栏

文章目录

在 HTML 中，<script> 标签用于引入外部 JavaScript 文件或直接嵌入 JavaScript 代码。在加载和执行脚本时，浏览器通常会阻塞页面的渲染过程，直到脚本加载并执行完毕。为了优化页面加载性能，HTML 提供了 defer 和 async 两个属性来控制脚本的加载和执行方式。本文将详细介绍这两个属性的区别和使用场景。

一、`defer` 和 `async` 的概述

1. `defer` 属性

当 <script> 标签使用 defer 属性时，表示该脚本应该在 HTML 文档解析完成后执行，但在 DOMContentLoaded 事件触发之前执行。换句话说，使用 defer 加载的脚本不会阻塞 HTML 文档的解析过程。所有带有 defer 的脚本会按照它们在文档中出现的顺序执行。

2. `async` 属性

与 defer 类似，async 也用于控制脚本的加载和执行顺序。但与 defer 不同，async 使得脚本的加载和执行变得完全异步。即浏览器会在后台加载脚本并在加载完成后立即执行该脚本，执行时不考虑脚本在文档中的顺序。因此，使用 async 属性的脚本执行顺序可能与它们在文档中的位置无关。

面试中可能考察点及回答：

defer 和 async 有什么区别？ defer 确保脚本在文档解析完毕后按顺序执行，且不会阻塞文档的解析。而 async 使得脚本异步加载并且在加载完成后立即执行，不关心文档的解析顺序。

二、`defer` 的工作原理

当使用 defer 属性时，脚本的加载与文档的解析是并行进行的。浏览器会继续解析 HTML 文档，不会因遇到脚本而停止渲染。所有带有 defer 属性的脚本会在 HTML 文档解析完成后，DOMContentLoaded 事件触发之前按照出现的顺序执行。这保证了 HTML 文档的结构已经完全构建，脚本执行时可以安全地访问和操作 DOM。

示例：

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>Defer Example</title>
</head>
<body>
  <h1>Hello, world!</h1>

  <script defer src="script1.js"></script>
  <script defer src="script2.js"></script>

</body>
</html>

在上述示例中，script1.js 和 script2.js 会并行加载，但它们的执行会等到 HTML 文档解析完成后按顺序进行。这样，页面内容不会被脚本加载和执行所阻塞。

面试中可能考察点及回答：

使用 defer 属性时，脚本的执行顺序是怎样的？ 使用 defer 属性的脚本会按照它们在 HTML 文档中出现的顺序执行，即使它们是异步加载的。

三、`async` 的工作原理

当使用 async 属性时，脚本会在后台加载，并且在加载完成后立即执行。与 defer 不同，async 属性不会保证脚本的执行顺序，因此，如果你有多个带有 async 属性的脚本，它们可能会在不同的时间点执行，具体顺序由脚本的加载速度决定。

示例：

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>Async Example</title>
</head>
<body>
  <h1>Hello, world!</h1>

  <script async src="script1.js"></script>
  <script async src="script2.js"></script>

</body>
</html>

在上述示例中，script1.js 和 script2.js 会异步加载并尽早执行，执行顺序可能会受到加载速度的影响。因此，script1.js 不一定会先于 script2.js 执行。

面试中可能考察点及回答：

async 属性会影响脚本的执行顺序吗？ 会，async 属性的脚本在加载完成后立即执行，执行顺序取决于脚本的加载速度，而不是它们在 HTML 中的顺序。

四、`defer` 和 `async` 的区别总结

特性	`defer`	`async`
加载方式	异步加载，非阻塞文档解析	异步加载，非阻塞文档解析
执行时机	文档解析完成后、`DOMContentLoaded` 事件触发之前执行	加载完成后立即执行
执行顺序	按照脚本在 HTML 中的顺序执行	加载完成后立即执行，顺序不确定
适用场景	用于需要操作 DOM 且顺序执行的脚本	用于独立、无关紧要的脚本，比如分析、广告脚本等
对页面渲染的影响	不会阻塞文档解析，页面渲染不受影响	不会阻塞文档解析，页面渲染不受影响