#浏览器原理面试知识图谱

#1. 核心架构

现代浏览器是多进程架构 (Multi-process Architecture)。

• Browser Process (主进程)：协调、UI 展示、文件访问。
• Renderer Process (渲染进程)：解析 HTML/CSS/JS，排版并绘制页面。最核心，每个 Tab 一个（资源隔离）。
• GPU Process：3D 绘制、硬件加速。
• Plugin Process：Flash 等插件。
• Network Process：网络请求。

#2. 知识点概览

#(1) 渲染原理 (Rendering)

• Critical Rendering Path：DOM -> CSSOM -> Render Tree -> Layout -> Paint -> Composite。
• Reflow & Repaint：回流必重绘，重绘不一定回流。
• Composite Layers：利用 GPU 加速减少回流。

#(2) 事件循环 (Event Loop)

• MacroTask (script, setTimeout, UI) vs MicroTask (Promise, MutationObserver)。
• 执行顺序：一宏 -> 清微 -> 渲染 -> 下一宏。
• rAF：requestAnimationFrame 在渲染前执行。
• rIC：requestIdleCallback 在空闲时执行。

#(3) 垃圾回收 (Garbage Collection)

• 标记清除 (Mark-and-Sweep)：主流算法，解决循环引用。
• 分代回收 (Generational)：新生代 (Scavenge) + 老生代 (Mark-Compact)。
• 增量标记 (Incremental)：减少全停顿 (STW)。

#(4) 存储与其差异 (Storage)

• Cookie：4KB, 随请求发送, HttpOnly 防 XSS。
• WebStorage：5MB, 纯前端, Local(持久)/Session(会话)。
• IndexedDB：大容量 NoSQL, 异步, 事务, 二进制。

#(5) 性能优化 (Performance)

• Network：HTTP/2, CDN, Gzip, Preload, LazyLoad。
• Rendering：减少 DOM 操作, 读写分离, 虚拟列表, CSS 动画 (GPU)。
• Code：Tree Shaking, Code Splitting, Web Worker。
• Metrics：LCP, INP, CLS。

#3. 面试备战建议

• 不仅要背八股文，还要结合实际场景（例如“如何优化首屏”）。
• 手写代码题：防抖节流、深拷贝、Promise、发布订阅、Event Loop 输出题。
• 关注新技术：WebAssembly, PWA, Service Worker。