浏览器原理

浏览器原理

一、 宏观视角：Chrome 多进程架构

现在的浏览器更像是一个分布式操作系统，而非简单的应用程序。

1. 四大核心进程

• Browser Process (主进程) ：
  • 职责：负责 UI（地址栏、书签）、协调子进程、管理存储（Cookie/Storage）。
  • 地位：整个浏览器的总指挥。
• Renderer Process (渲染进程) ：
  • 职责：解析 HTML/CSS/JS，将网页转化为图像。
  • 机制 ：沙箱隔离 ，通常一页一进程（Site Isolation 策略保证跨域隔离）。
• GPU Process ：
  • 职责：负责页面最终的绘制与合成，处理 WebGL、CSS3 3D 变换。
• Network Service ：
  • 职责：独立负责网络资源加载，提升安全性和稳定性（防崩溃）。

2. 为什么是多进程？

• 稳定性：一个 Tab 崩了，不会导致整个浏览器崩。
• 安全性：渲染进程运行在沙箱中，限制了读写系统文件的权限。
• 流畅性：JS 阻塞渲染进程时，不会影响 Browser 进程的 UI 响应（如切换 Tab）。

---

二、 导航全流程：从 URL 到页面展示

当你在地址栏按下回车：

1. 处理输入：Browser 进程判断是 URL 还是搜索查询。
2. 网络请求 ：Network Service 发起 DNS -> TCP -> TLS -> HTTP 请求。
   • 注：Service Worker 可在此阶段拦截请求，直接返回缓存。
3. 响应读取：检查 MIME Type。如果是 HTML，通知 Browser 进程。
4. 准备渲染进程：Browser 进程启动或复用一个 Renderer 进程。
5. 提交导航 ：
   • 关键点 ：Renderer 进程接收数据流。此时旧页面卸载，新页面白屏，Loading 圈开始转动。

---

三、 渲染流水线

这是前端性能优化的核心战场。

1. 解析 (Parsing)

• HTML ➝ DOM 树：构建文档结构。
• CSS ➝ CSSOM 树：计算具体样式。

2. 布局 (Layout/Reflow)

• DOM + CSSOM ➝ Layout Tree (布局树)
• 规则 ：
  • display: none：不在布局树中。
  • visibility: hidden：在布局树中（占位）。
  • 布局树节点包含了元素的 几何信息 (x, y, width, height)。

3. 分层 (Layering)

• 浏览器将页面拆分为多个图层 (Layers) 以实现独立光栅化。
• 触发条件 ：will-change, transform: translateZ, opacity, <video>, z-index 上下文等。
• 目的：避免牵一发而动全身，减少重绘区域。

4. 绘制

• 生成 绘制列表 (Paint Records)。注意，这只是一堆绘制指令（"画个红圈"），并没有真正填充像素。

5. 合成 ------ 性能之源

• 角色：合成线程 (Compositor Thread) 与 GPU 配合。
• 流程 ：
  1. 分块：将图层切分成小块。
  2. 光栅化 ：将图块转换为 位图 (Bitmap) (通常由 GPU 完成)。
  3. 合成：GPU 将所有位图合成最终屏幕图像。

总结：性能优化三大法宝

• Reflow (重排) ：修改了几何属性（宽/高）。触发 Layout -> Paint -> Composite。最贵。
• Repaint (重绘) ：修改了颜色/背景。触发 Paint -> Composite。次之。
• Composite (合成) ：修改 transform 或 opacity。只触发 Composite 。
  • 原理：不占用主线程，直接在合成线程操作图块。即使 JS 卡死，动画依然流畅。

---

四、 JavaScript 运行机制

1. 内存管理 (V8)

• 栈：存储执行上下文、基本类型。
• 堆 ：存储对象。GC 采用 分代回收（新生代 Scavenge 算法 + 老生代 标记-清除-整理）。

2. 事件循环 (Event Loop)

浏览器的循环机制如下（与 Node.js 略有不同）：

1. 执行栈 (Stack)：同步代码执行完毕。
2. 微任务 ：清空队列！(Promise.then, MutationObserver).
   • Microtasks 优先级极高，插队执行，直到队列为空。
3. 渲染时机 ：判断是否需要更新屏幕（通常 16.6ms 一次）。
   • 如果有，执行 requestAnimationFrame -> Style -> Layout -> Paint。
4. 宏任务 ：取一个 任务执行。(setTimeout, setInterval, I/O, UI Event).
5. 回到第一步。

---

启示

1. 动画选 CSS ：尽量用 transform 和 opacity，避开 layout 属性（top/left/width）。
2. 避免强制同步布局 ：不要在修改样式后紧接着读取 offsetHeight/scrollTop 等属性。
3. 减少主线程阻塞 ：复杂的 JS 计算会延迟渲染和交互，考虑使用 Web Worker。
4. 利用空闲时间 ：低优先级的逻辑可以使用 requestIdleCallback。