HTML的async与type='module'：ES模块脚本加载与执行时序深度解析
大家好！今天我们来深入探讨HTML中async属性与type='module'属性结合使用时，对ES模块脚本加载和执行时序的影响。这对于理解现代前端开发中的模块化机制至关重要，尤其是在构建复杂Web应用时，正确地管理脚本的加载和执行顺序能够显著提升性能和用户体验。
ES模块的基本概念
在深入研究async和type='module'之前，我们先回顾一下ES模块的基本概念。ES模块是ECMAScript标准定义的模块化系统，它允许我们将JavaScript代码分割成独立的文件（模块），并通过import和export语句来声明模块间的依赖关系和对外提供的接口。
与传统的script标签引入的脚本不同，ES模块具有以下特点：
- 严格模式： ES模块默认运行在严格模式下，这意味着一些在非严格模式下被允许的行为会被禁止，例如隐式声明全局变量。
- 模块作用域： 每个模块都拥有独立的作用域，避免了全局命名冲突。
- 静态分析： ES模块的依赖关系可以在编译时进行静态分析，这使得浏览器可以更有效地加载和执行模块。
- 异步加载： ES模块默认是异步加载的，这有利于提高页面加载速度。
type='module'属性
要告诉浏览器一个script标签包含的是ES模块代码，我们需要设置type属性为'module'。例如：
<script type="module" src="my-module.js"></script>一旦设置了type='module'，浏览器就会将该脚本视为ES模块，并按照ES模块的规则进行解析、加载和执行。
async属性
async属性用于指示浏览器异步加载和执行脚本。当一个script标签设置了async属性时，浏览器会并行下载该脚本，并在下载完成后立即执行，而不会阻塞HTML的解析。
<script async src="my-script.js"></script>async与type='module'的结合
现在，我们重点关注async属性与type='module'属性结合使用时的情况。
<script async type="module" src="my-module.js"></script>在这种情况下，浏览器会并行下载my-module.js，并在下载完成后立即执行。但是，需要注意的是，由于type='module'的存在，浏览器会按照ES模块的规则来执行该脚本。这意味着：
- 依赖关系处理： 如果
my-module.js依赖于其他ES模块，浏览器会先下载这些依赖模块，然后再执行my-module.js。 - 执行顺序： 虽然脚本是异步加载的，但ES模块的执行顺序仍然会受到依赖关系的影响。浏览器会确保依赖模块在被依赖模块之前执行。
- 文档加载：
async属性保证了脚本不会阻塞HTML的解析，但是脚本的执行可能会在HTML解析完成之前发生。
加载和执行时序详解
为了更清楚地理解async和type='module'结合使用时的加载和执行时序，我们通过一个具体的例子来说明。
假设我们有以下HTML代码：
<!DOCTYPE html>
<html>
<head>
<title>Async Module Example</title>
</head>
<body>
<h1>Hello, World!</h1>
<script async type="module" src="moduleA.js"></script>
<script async type="module" src="moduleB.js"></script>
<script async type="module" src="moduleC.js"></script>
</body>
</html>以及以下ES模块代码：
moduleA.js:
import { message } from './moduleB.js';
console.log('Module A is running.');
console.log(message);moduleB.js:
export const message = 'Hello from Module B!';
console.log('Module B is running.');moduleC.js:
console.log('Module C is running.');在这个例子中，我们有三个ES模块：moduleA.js、moduleB.js和moduleC.js。moduleA.js依赖于moduleB.js，而moduleC.js没有依赖关系。所有这些模块都通过设置async和type='module'的script标签异步加载。
根据async和type='module'的特性，我们可以推断出以下可能的执行顺序：
- 浏览器开始解析HTML文档。
- 当遇到
<script async type="module" src="moduleA.js"></script>时，浏览器开始异步下载moduleA.js。 - 当遇到
<script async type="module" src="moduleB.js"></script>时，浏览器开始异步下载moduleB.js。 - 当遇到
<script async type="module" src="moduleC.js"></script>时，浏览器开始异步下载moduleC.js。 - 由于
moduleA.js依赖于moduleB.js，浏览器会先下载moduleB.js并执行它。控制台会输出 "Module B is running."。 - 下载完成后，浏览器会执行
moduleA.js。控制台会输出 "Module A is running." 和 "Hello from Module B!"。 - 下载完成后，浏览器会执行
moduleC.js。控制台会输出 "Module C is running."。
需要注意的是，由于async属性的存在，moduleA.js、moduleB.js和moduleC.js的下载顺序是不确定的。但是，ES模块的依赖关系会保证moduleB.js在moduleA.js之前执行。moduleC.js的执行可能会在moduleA.js之前或之后发生，这取决于哪个模块先下载完成。
为了更清晰的展示，我们使用一个表格来总结这些关键点：
| 模块 | 依赖关系 | 下载顺序 | 执行顺序 |
|---|---|---|---|
| moduleA.js | moduleB.js | 不确定 | 在 moduleB.js 之后，但在文档DOMContentLoaded事件之前（取决于下载速度和HTML解析进度） |
| moduleB.js | 无 | 不确定 | 在 moduleA.js 之前，但在文档DOMContentLoaded事件之前（取决于下载速度和HTML解析进度） |
| moduleC.js | 无 | 不确定 | 独立于 moduleA.js 和 moduleB.js，但在文档DOMContentLoaded事件之前（取决于下载速度和HTML解析进度）。 可能在 A 和 B 之前，之间或之后。 |
代码示例：演示 async 和 type='module' 的加载和执行时序
为了更直观地展示 async 和 type='module' 的影响，我们提供一个更复杂的例子，并添加一些定时器和事件监听器来帮助我们观察执行顺序。
index.html:
<!DOCTYPE html>
<html>
<head>
<title>Async Module Example</title>
</head>
<body>
<h1>Hello, World!</h1>
<script>
console.log("Inline script before modules.");
</script>
<script async type="module" src="moduleA.js"></script>
<script async type="module" src="moduleB.js"></script>
<script async type="module" src="moduleC.js"></script>
<script>
console.log("Inline script after modules.");
document.addEventListener('DOMContentLoaded', () => {
console.log("DOMContentLoaded event fired.");
});
</script>
</body>
</html>moduleA.js:
import { message, delay } from './moduleB.js';
console.log('Module A is running.');
async function run() {
await delay(100);
console.log(message);
}
run();moduleB.js:
export const message = 'Hello from Module B!';
export async function delay(ms) {
return new Promise(resolve => setTimeout(resolve, ms));
}
console.log('Module B is running.');moduleC.js:
console.log('Module C is running.');在这个例子中，我们在 moduleA.js 中引入了一个 delay 函数，并使用 await 来模拟一个异步操作。这可以帮助我们更清楚地观察模块的执行顺序。
根据 async 和 type='module' 的特性，以及 ES 模块的依赖关系，我们可以预测可能的输出顺序：
- "Inline script before modules."
- （moduleB.js 下载并执行） "Module B is running."
- （moduleC.js 下载并执行） "Module C is running."
- （moduleA.js 下载并执行） "Module A is running."
- "Inline script after modules."
- （100ms 延迟后） "Hello from Module B!"
- "DOMContentLoaded event fired."
实际的输出顺序可能会因为网络延迟和其他因素而略有不同，但基本原则是：
- inline script 先执行
- moduleB.js 在 moduleA.js 之前执行
- moduleC.js 的执行顺序不确定，但会在DOMContentLoaded之前
- async 确保了模块不会阻塞HTML解析
- DOMContentLoaded 事件会在所有模块加载完成后触发
通过运行这个例子，你可以更直观地理解 async 和 type='module' 的工作方式，以及它们如何影响模块的加载和执行时序。
最佳实践
在使用async和type='module'时，我们需要注意以下几点：
- 明确依赖关系： 确保ES模块的依赖关系声明清晰，避免循环依赖。
- 合理使用
async：async属性适用于那些不依赖于DOMContentLoaded事件的脚本。如果脚本需要在DOMContentLoaded事件之后执行，则不应该使用async属性。 - 考虑性能： 避免加载过多的ES模块，这可能会导致大量的HTTP请求，影响页面加载速度。可以使用模块打包工具（如Webpack、Rollup等）将多个模块打包成一个文件。
- 测试： 在不同的浏览器和设备上测试你的代码，确保ES模块的加载和执行行为符合预期。
常见问题
-
async和defer的区别？async和defer都用于异步加载脚本，但它们的执行时机不同。async脚本在下载完成后立即执行，可能会在DOMContentLoaded事件之前执行。而defer脚本会在HTML解析完成后，按照它们在HTML文档中出现的顺序依次执行，并且会在DOMContentLoaded事件之前执行。 -
type='module'必须使用async或defer吗？不必须。如果不使用
async或defer，ES模块会按照它们在HTML文档中出现的顺序依次加载和执行，并且会阻塞HTML的解析。建议使用async或defer来提高页面加载速度。 -
ES模块的兼容性如何？
现代浏览器都支持ES模块。对于不支持ES模块的旧浏览器，可以使用模块打包工具（如Webpack、Rollup等）将ES模块转换为传统的JavaScript代码。
总结：理解 async 和 type='module' 的关键作用
async 属性与 type='module' 属性的结合，为我们提供了强大的ES模块异步加载能力，有助于提高Web应用的性能和用户体验。理解它们的加载和执行时序，能够帮助我们更好地管理脚本的依赖关系，并避免潜在的问题。
现在我再提炼一下重点：async 允许并行下载，type='module' 启用 ES 模块特性，依赖关系决定执行顺序，DOMContentLoaded 是关键时刻。