浏览器原理

浏览器原理

一、 宏观视角：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。