脚本加载：parser-blocking、defer、async 与模块脚本

主题定位

脚本题的关键不是背两个属性，而是解析器、下载器和执行时机如何协同。

• 脚本题的关键不是背两个属性，而是解析器、下载器和执行时机如何协同
• 脚本加载涉及 HTML 解析器、预加载扫描器、网络下载和 JS 执行时机
• 只说 defer 与 async 的顺序差异不够，还要理解它们为什么影响首屏与事件时序
• 把所有脚本都加 async 容易打乱初始化顺序，导致运行时竞态

关键概念拆分

对象一

对象一 先看职责边界，再看生命周期、数据形态和与其他对象的协作关系。 对象一 的差异最终会体现在 语义结构、资源加载、可访问性 这几个维度。 对象一 讲清适用边界、失效条件和代价结构，结论才有技术含量。

对象二

对象二 先看职责边界，再看生命周期、数据形态和与其他对象的协作关系。 对象二 的差异最终会体现在 语义结构、资源加载、可访问性 这几个维度。 对象二 讲清适用边界、失效条件和代价结构，结论才有技术含量。

差异对照与适用场景

• 脚本题的关键不是背两个属性，而是解析器、下载器和执行时机如何协同
• 脚本加载涉及 HTML 解析器、预加载扫描器、网络下载和 JS 执行时机
• 只说 defer 与 async 的顺序差异不够，还要理解它们为什么影响首屏与事件时序
• 把所有脚本都加 async 容易打乱初始化顺序，导致运行时竞态
• 普通脚本默认 parser-blocking：HTML 解析遇到 <script> 会暂停，等待脚本下载并执行，再继续解析
• defer 脚本可并行下载，但会等到文档解析完成后按出现顺序执行，且通常在 DOMContentLoaded 之前完成

工程建议与边界

• 脚本题的关键不是背两个属性，而是解析器、下载器和执行时机如何协同
• 脚本加载涉及 HTML 解析器、预加载扫描器、网络下载和 JS 执行时机
• 只说 defer 与 async 的顺序差异不够，还要理解它们为什么影响首屏与事件时序
• 把所有脚本都加 async 容易打乱初始化顺序，导致运行时竞态
• 普通脚本默认 parser-blocking：HTML 解析遇到 <script> 会暂停，等待脚本下载并执行，再继续解析

问答设计及延伸

标准回答

回答 脚本加载：parser-blocking、defer、async 与模块脚本 时，先定义 对象一、对象二 各自解决的问题，再比较它们在 语义结构、资源加载、可访问性 上的差异，最后给出选型边界和工程代价。

追问拆解

• 脚本加载：parser-blocking、defer、async 与模块脚本 与“URL 到页面：导航、解析、执行与首屏呈现”的边界关系
• 脚本加载：parser-blocking、defer、async 与模块脚本 与“Vite 构建链路：开发服务器、预构建与生产产物”的边界关系
• 跨标签页、跨域、多端协作场景下的结论变化
• 维护成本上升后的优先级调整

容易失分的点

• 只给“哪个好”的结论，不先拆对象
• 只报 API 或术语，不解释运行时行为和代价
• 缺少真实场景，导致结论过度绝对

项目映射

• 结合真实系统说明 对象一 到 对象二 分别落在哪段链路
• 补充未选方案的放弃原因和约束差异
• 补充线上问题、治理动作和验证结果

相关主题

• URL 到页面：导航、解析、执行与首屏呈现
• Vite 构建链路：开发服务器、预构建与生产产物