[!info] related notes

• 所属 MOC: 浏览器 JS MOC
• 上位主题: ECMAScript 模块模式, 浏览器中的 JavaScript
• 并列概念: ES6 模块导入导出, commonjs-amd-umd

HTML中的脚本加载

这篇笔记关注浏览器脚本加载层，不讨论 ECMAScript 语法本身。

三种加载模式

普通 script

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

浏览器遇到时会：停止解析 → 下载 → 执行 → 继续解析。这叫解析阻塞，因为 JS 可能修改 DOM。

defer

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

• 脚本并行下载
• HTML 继续解析
• 等 HTML 全部解析完成后再按顺序执行
• 适合依赖 DOM 的页面脚本

async

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

• 脚本并行下载
• 下载完立刻执行，执行时可能打断 HTML 解析
• 多个 async 脚本执行顺序不保证

模块脚本

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

• 默认延迟执行
• 顶层 this 不是 window
• 默认严格模式
• 变量不会污染全局
• 支持 import/export

速查对比

类型	下载	执行时机	阻塞解析	顺序保证
普通	阻塞	立即	是	是
defer	并行	DOM 解析完	否	是
async	并行	下载完立即	可能打断	不保证
module	并行	默认延迟	否	是

重点问题

• 普通 <script> 如何阻塞解析
• defer 和 async 的区别
• type="module" 为什么改变脚本加载与作用域方式
• 动态插入脚本有什么行为差异

学习检查

不看正文回答：

1. 普通 <script> 为什么会阻塞 HTML parser？
2. defer 与 async 都能并行下载，但执行时机和顺序保证有什么差异？
3. 为什么有依赖顺序的多个脚本通常不适合 async？
4. module script 为什么默认具有类似 defer 的加载/执行语义？
5. script 下载、执行与 DOMContentLoaded 之间是什么关系？
6. 给三个相互依赖脚本和一个独立统计脚本，分别选择普通/defer/async/module 并说明理由。

放回主题图里看

• 学模块语法本体：ES6 模块导入导出
• 学浏览器如何加载这些脚本：当前这篇
• 学完整浏览器宿主环境：浏览器中的 JavaScript