异步与浏览器

复习方式：先遮住答案口述 30～90 秒，再核对关键点；“追问与易错点”用于进一步练习。

1. 浏览器事件循环如何工作？

展开答案与追问

参考答案： 一次任务执行完、调用栈清空后，会在相应检查点处理微任务队列，直到队列清空；浏览器在合适的渲染机会更新页面。Promise 回调和 queueMicrotask 是常见微任务，定时器回调是任务。不同任务来源不应简化成唯一全局 FIFO 队列。

追问与易错点： 持续追加微任务可能阻塞后续任务与渲染。执行模型参考

2. Promise 的状态和错误传播规则？

展开答案与追问

参考答案： 状态为 pending、fulfilled、rejected，确定后不再改变。then 返回新 Promise；回调返回普通值会使新 Promise 兑现，抛错会使其拒绝，返回 Promise/thenable 会采纳其最终结果。catch 后若返回普通值，链会恢复为成功。

追问与易错点： finally 通常透传原结果；若其抛错或返回拒绝的 Promise，会覆盖结果。

3. async/await 与 Promise 的关系？

展开答案与追问

参考答案： async 函数总是返回 Promise；await 挂起当前 async 函数后续执行，不阻塞整个线程。try/catch 能捕获 await 的拒绝。互不依赖的请求可以先一起发起，再 await Promise.all，避免无意义串行。

追问与易错点： await 一个普通值也会让后续代码异步继续。

4. Promise.all、allSettled、race、any 怎么选？

展开答案与追问

参考答案： all 全部成功才成功，任一拒绝则拒绝；allSettled 等全部结束并给出每项结果；race 采用首个落定结果；any 采用首个成功结果，全部拒绝时抛 AggregateError。它们通常不会取消其他已经启动的操作。

追问与易错点： 空数组下 all/allSettled 兑现，any 拒绝，race 保持 pending；回调仍按微任务调度。

5. 从输入 URL 到页面展示经历什么？

展开答案与追问

参考答案： 可能先命中缓存或 Service Worker；随后按需要进行 DNS、建立传输连接、TLS、HTTP 请求响应。解析 HTML 构建 DOM，处理 CSS、脚本和子资源，再经历布局、绘制与合成。连接复用、协议版本和缓存会改变实际路径。

追问与易错点： 不要断言每次都重新 DNS/TCP；HTTP/3 使用 QUIC。

6. async、defer 和 module 脚本如何执行？

展开答案与追问

参考答案： 经典外部脚本无属性时通常阻塞 HTML 解析；defer 并行下载，解析结束后按顺序执行，完成后才触发 DOMContentLoaded；async 下载完成后尽快执行，不保证文档顺序。module 默认具备延后执行特性，并有依赖图。

追问与易错点： 这里主要讨论 parser 插入的脚本；动态插入脚本有不同规则。

7. 事件捕获、冒泡和事件委托是什么？

展开答案与追问

参考答案： 事件先经历捕获到达目标，再对支持冒泡的事件向祖先传播。委托在祖先上监听，通过 target/closest 定位业务元素，适合动态列表。currentTarget 是监听器所挂元素；target 是事件目标，Shadow DOM 下可能重定向。

追问与易错点： preventDefault 阻止可取消的默认行为；stopPropagation 阻止传播，两者不同。

8. 如何排查内存泄漏？

展开答案与追问

参考答案： 先确认可重复场景，比较操作前后的堆快照，查看保留路径和脱离文档的 DOM。常见原因是未移除监听、未停止定时器、未取消订阅、全局缓存无限增长。组件销毁时统一清理，并给缓存设计淘汰策略。

追问与易错点： 单次内存上涨不等于泄漏，要区分正常缓存、GC 时机与持续增长。