浏览器高频追问 Q&A

1. Q: 回流和重绘哪个更重？

A: 回流更重，因为涉及布局计算。（深入阅读：回流与重绘）

2. Q: 为什么要减少 DOM 深度？

A: 深层结构会增加样式计算和布局成本。（深入阅读：从渲染树到像素）

3. Q: 预加载和预渲染区别？

A: 预加载下载资源，预渲染会提前渲染页面。（深入阅读：关键渲染路径与资源提示）

4. Q: 从 URL 到渲染最常考哪几段？

A: DNS、TCP/TLS、HTTP、解析与渲染流水线。（深入阅读：输入 URL 后的完整过程）

5. Q: 浏览器缓存如何命中？

A: 先强缓存，再协商缓存。（深入阅读：缓存策略）

6. Q: 为什么不建议用 `unload` 做页面离开上报？

A: 移动端可能不触发，而且会影响 bfcache。优先在 visibilitychange/pagehide 中使用 navigator.sendBeacon()；它只保证请求被浏览器接受入队，不保证服务端已收到。（深入阅读：页面关闭、PV 与可靠上报、队列、上报与降级）

7. Q: `PerformanceObserver` 能统计哪些性能问题？

A: 可观察长任务、资源、导航、绘制等条目，先检查 supportedEntryTypes。长任务通常指持续至少 50 毫秒的主线程任务；跨源资源的详细耗时还需要 Timing-Allow-Origin。（深入阅读：性能与请求采集、PerformanceObserver 与监控 SDK）

8. Q: 如何避免多个接口失败时弹出多个错误提示？

A: 在请求协调层统一聚合错误，按一次批次或业务操作生成一个提示；不要在每个 catch 中直接弹 Toast，并把主动取消与真正失败分开处理。（深入阅读：请求去重与错误聚合）

9. Q: 虚拟列表和分帧渲染有什么区别？

A: 虚拟列表长期只保留可视区附近的少量 DOM，解决节点数量问题；分帧渲染只是把创建工作拆到多帧，最终仍会创建全部节点。长列表通常优先窗口化，再按需分帧。（深入阅读：大量 DOM 的分帧渲染）

10. Q: Service Worker 缓存为什么会让线上出现旧版本？

A: Worker 和 Cache Storage 有独立生命周期；旧缓存未清理或新 Worker 尚未接管时，页面可能继续使用旧资源。缓存要版本化、在 activate 清理，并设计兼容窗口和回滚策略。（深入阅读：Service Worker 与跨页面通信）

11. Q: `BroadcastChannel` 的通信边界是什么？

A: 它只在同源的窗口、标签页和 Worker 间广播，数据按结构化克隆传递，发送者不接收自己的消息；跨源通信需要其他受控机制。（深入阅读：iframe、窗口和 Worker 的可靠通信）

12. Q: `preload`、`prefetch` 和 `preconnect` 怎么选？

A: preload 是当前页面确定需要的资源，prefetch 是未来可能需要的低优先级资源，preconnect 只提前建立连接。preload 的 as、CORS 模式必须与实际请求一致，否则可能重复下载。（深入阅读：关键渲染路径与资源提示）

13. Q: 如何可靠统计 PV？

A: 首次文档加载只记一次；SPA 由路由切换产生稳定页面 ID 并去重，bfcache 恢复要区分 pageshow.persisted。上报应异步、限流并脱敏，不能阻塞页面关闭。（深入阅读：页面关闭、PV 与可靠上报、队列、上报与降级）

14. Q: User-Agent 能准确判断设备吗？

A: 不能保证。UA 可被伪装且信息逐渐减少；布局用媒体查询，功能分支用能力检测，视口宽度和输入能力应分别判断。（深入阅读：设备能力与响应式判断）

15. Q: 几万个 DOM 节点如何避免一次性卡住页面？

A: 能分页或虚拟化就不要创建全部节点；确实需要全部创建时，用 DocumentFragment 减少逐节点挂载，并用 requestAnimationFrame 分批调度，让出输入和绘制时间。批次大小要按真实设备的 Performance 记录调整，不能把固定数量当成通用答案。（深入阅读：大量 DOM 的分帧渲染）