以为自己了解 Async、Defer 和Module？这 5 个误解会让你大吃一惊

• React Hook 深入浅出
• CSS技巧与案例详解
• vue2与vue3技巧合集
• VueUse源码解读

在2024年的今天，JavaScript的高效加载仍然是优化网页性能的关键。然而，许多开发者对脚本加载属性（尤其是async、defer和module）的细节理解还不够深入。本文将探讨这些属性的常见误解，分析它们各自的优缺点，并阐明如何有效使用它们。

误区一：async 和 defer 是一样的

实际上，async和defer虽然都用于加载外部脚本而不阻塞HTML解析，但它们的工作方式有所不同：

• async：脚本异步加载，一旦可用就立即执行。这意味着脚本可能在HTML解析完成之前或之后运行。
• defer：脚本与HTML解析并行加载，但只在整个文档解析完成后执行。

优缺点

Async

• 优点适用于不依赖于完全解析 DOM 的脚本，如分析。
• 缺点不能保证执行顺序。如果有多个异步脚本，它们的执行顺序可能会被打乱。

Defer

• 优点保持执行顺序。脚本在文档解析后运行，确保 DOM 已准备就绪。
• 缺点只对外部脚本有效。

示例

<script async src="analytics.js"></script>
<script defer src="main.js"></script>

在这个例子中，analytics.js会在加载完成后立即执行，而main.js会等到文档解析完成后再执行。

误区二：async 总是比 defer 好

选择async还是defer取决于脚本在应用中的角色：

• 使用async：适用于独立的脚本，不依赖DOM或其他脚本。比如广告或分析脚本。
• 使用defer：适用于需要完整DOM或依赖其他脚本的情况。比如主应用逻辑。

示例：

<script async src="ads.js"></script>
<script defer src="app.js"></script>

在这里，ads.js是异步加载的，因为它独立于 DOM，而app.js则推迟执行，直到 DOM 准备就绪。

误区三：module 属性仅用于ES6模块

module属性不仅表示脚本应被视为ES6模块，还有其他重要特性：

• 优点：支持现代JavaScript特性，如import/export。自动处于严格模式，默认具有defer特性。
• 缺点：在不使用转译器的情况下，旧浏览器不支持。

示例：

<script type="module" src="main.js"></script>

在本例中，main.js被视为 ES6 模块，以确保支持现代 JavaScript 功能。

误区四：内联脚本不需要defer

虽然defer只适用于外部脚本，但了解内联脚本的执行时机也很重要：

<script>
  // 这段代码会立即执行，可能阻塞HTML解析
  console.log("我是内联脚本");
</script>

最佳实践：对于关键脚本，考虑将它们放在body标签的末尾，以避免阻塞初始渲染。

误区五：使用module属性就能保证最佳性能

虽然module属性带来许多好处，但它并不自动保证最佳性能：

• 转译：旧浏览器不支持ES6模块，需要转译，可能引入性能开销。
• HTTP/2：与HTTP/2结合使用可以提高性能，因为多个脚本可以并发加载而不会阻塞。

示例：

<script type="module">
  import { init } from './app.js';
  init();
</script>

确保构建过程针对基于模块的脚本进行了优化。

结语

通过深入理解async、defer和module的差异和适用场景，可以显著提升web应用的性能和可维护性。希望这篇文章能帮助你在项目中更自信地决定何时以及如何使用这些属性。

记住，选择正确的脚本加载方式可以大大提升用户体验。根据应用的具体需求，合理使用这些属性，让你的网站加载更快、运行更流畅。

本文 GitHub https://github.com/qq449245884/xiaozhi 已收录，有一线大厂面试完整考点、资料以及我的系列文章。