在现代前端开发中，脚本加载和执行的顺序对于页面性能和用户体验至关重要。为了优化网页加载速度，前端开发者通常会使用各种属性来控制 JavaScript 脚本的加载时机和执行顺序。两个常见的属性是 defer 和 type="module"，它们在 HTML 中用于 <script> 标签，并且在控制脚本的加载和执行时，起到了非常不同的作用。
在本文中，我们将详细分析 type="module" 和 defer 的异同之处，结合具体的代码示例和实际应用场景，帮助大家深入理解这两个属性的特性。
1. type="module"：模块化加载与严格模式
type="module" 是 HTML5 引入的一种脚本类型，旨在支持模块化 JavaScript。模块化在前端开发中越来越重要，它使得代码的维护和重用变得更加容易。让我们从几个关键点来解读这个属性。
1.1 异步加载
当你在 <script> 标签中使用 type="module" 时，浏览器会异步加载该脚本。这意味着即使页面中的模块正在下载，浏览器不会阻塞页面的其他资源渲染，例如样式表和图像。这有助于提高页面的加载速度，改善用户体验。
<script type="module" src="app.js"></script>
1.2 模块化
与传统的 <script> 标签不同，type="module" 使得 JavaScript 文件成为模块，可以使用 import 和 export 语法导入和导出功能。这允许开发者将不同功能的代码拆分到多个文件中，从而提升代码的可读性和维护性。
// app.js
import { greet } from './greet.js';
greet();
// greet.js
export function greet() {
console.log('Hello from the module!');
}
1.3 严格模式
当你使用 type="module" 时，所有的 JavaScript 代码都会默认启用严格模式。严格模式可以捕获一些常见的编程错误，例如禁止使用未声明的变量，或者禁止删除不可删除的属性。这有助于避免一些常见的 JavaScript 错误。
// Example of strict mode error
x = 10; // Error in strict mode
1.4 延迟执行
type="module" 标签的脚本会等到文档完全解析后才会执行。这意味着，脚本的执行会在 DOM 完全加载之后进行，确保脚本能够安全地访问和操作 DOM 元素。
<body>
<h1>Welcome</h1>
<script type="module" src="script.js"></script>
</body>
1.5 网络请求和缓存
模块脚本的加载是按需进行的，并且支持浏览器缓存。例如，当你导入一个模块文件时，浏览器会缓存该文件，避免每次都重新加载，这有助于提高页面的性能。
2. defer：延迟执行直到文档解析完成
defer 是 HTML <script> 标签中的一个属性，它告诉浏览器延迟执行该脚本，直到 HTML 文档完全解析完毕为止。与 type="module" 一样，defer 也是异步加载脚本的方式，但它与 type="module" 的主要区别在于以下几个方面。
2.1 异步加载
当你在 <script> 标签中使用 defer 属性时，浏览器会异步加载该脚本。也就是说，脚本会与页面的其他资源并行加载，而不会阻塞页面的渲染。
<script defer src="script.js"></script>
2.2 延迟执行
与 type="module" 不同的是，使用 defer 的脚本会等到整个 HTML 文档被解析完毕后才执行。如果页面中有多个带有 defer 属性的脚本，它们会按照在文档中出现的顺序依次执行。
<body>
<h1>Welcome</h1>
<script defer src="first.js"></script>
<script defer src="second.js"></script>
</body>
2.3 作用域和严格模式
与 type="module" 不同，defer 脚本并不启用严格模式，也无法使用 import 和 export 语法。因此，defer 适用于那些不需要模块化支持的普通 JavaScript 脚本。
2.4 保持执行顺序
如果你在页面中使用多个带有 defer 属性的脚本，它们会按照文档中的顺序依次执行。这种顺序执行的特性使得它们适用于那些需要按顺序执行的脚本。
<script defer src="first.js"></script>
<script defer src="second.js"></script>
3. type="module" 与 defer 的区别
尽管 type="module" 和 defer 都能实现脚本的异步加载和延迟执行，它们之间还是存在一些重要的区别。让我们通过对比来帮助大家更好地理解。
| 特性 | type="module" | defer |
|---|---|---|
| 异步加载 | 是的，异步加载 | 是的，异步加载 |
| 延迟执行 | 等待 DOM 完全解析后执行 | 等待 DOM 完全解析后执行 |
| 模块支持 | 支持模块化开发，支持 import 和 export | 不支持模块化开发，只能写普通脚本 |
| 严格模式 | 默认启用严格模式 | 不启用严格模式 |
| 执行顺序 | 每个模块的执行顺序是按 import 语句的顺序 | 按照脚本标签在文档中的顺序执行 |
| 浏览器缓存 | 支持缓存 | 支持缓存 |
| 作用域 | 模块有自己的作用域 | 脚本共享全局作用域 |
3.1 何时使用 type="module"？
- 当你需要模块化的代码时，使用
type="module"。它支持import和export，使得代码的结构更加清晰，方便维护和重用。 - 如果你希望确保代码在严格模式下运行，防止潜在的编程错误，使用
type="module"。
3.2 何时使用 defer？
- 当你不需要模块化功能时，使用
defer。它适用于那些不需要导入或导出的普通 JavaScript 脚本。 - 如果你希望多个脚本按顺序执行且不影响页面渲染，
defer是一个理想选择。
4. 实际应用场景
在实际开发中，type="module" 和 defer 可以根据需求选择使用。
- 使用
type="module"的场景：现代前端开发框架（如 React、Vue、Angular）都依赖于模块化代码，因此在开发这些应用时，使用type="module"是理所当然的。 - 使用
defer的场景：如果你在一个简单的页面中加载一些第三方脚本，或者希望确保多个脚本按顺序执行而不影响页面加载速度，defer会非常有用。
结语
type="module" 和 defer 都是现代网页开发中不可或缺的工具，它们各自具有独特的优势和使用场景。理解它们的不同之处，可以帮助开发者更好地优化页面性能，确保脚本按需加载并在合适的时机执行。无论是模块化开发还是按顺序加载，掌握这两个属性的正确使用方式，能够让你的前端开发更加得心应手。
