浏览器底层原理深度解析

一、浏览器多进程架构

现代浏览器不是单一程序，而是由多个进程协作组成的复杂系统。Chrome 采用多进程架构，将不同功能隔离到独立进程，提升稳定性和安全性。

1.1 核心进程职责

二、从 URL 到页面显示的完整旅程

三、渲染进程深度剖析

渲染进程是浏览器渲染的核心，负责将HTML/CSS/JS转化为屏幕像素。它内部由多个线程协作完成复杂任务。

3.1 主线程（Main Thread）

主线程是渲染进程的指挥家，负责执行大部分关键任务：

• 解析HTML → 构建DOM树（Document Object Model）
• 解析CSS → 构建CSSOM树（CSS Object Model）
• 执行JavaScript → 可能修改DOM/CSSOM，阻塞渲染
• 样式计算 → 计算每个DOM节点的最终样式
• 布局计算 → 计算元素的几何位置和尺寸
• 分层 → 为某些元素创建独立的渲染层
• 绘制 → 生成绘制指令列表（Paint Records）

3.2 合成器线程（Compositor Thread）

合成器线程是渲染进程的优化核心，专门负责图层管理和合成：

• 图层树管理 → 接收主线程的图层树（Layer Tree）
• 视口分块 → 将图层分割为256×256或512×512的Tile
• 优先级调度 → 优先光栅化视口内的Tile
• 输入事件响应 → 独立处理滚动、缩放，不依赖主线程
• 合成帧提交 → 将所有图层合成后提交给GPU

3.3 光栅化线程池（Raster Threads）

光栅化线程池是渲染进程的劳动力，专门将矢量图形转化为位图像素：

• 并行光栅化 → 多个线程同时处理不同Tile
• GPU加速 → 可选择GPU光栅化（更快）
• 位图缓存 → 光栅化结果缓存到GPU显存

四、渲染流水线五大阶段

从HTML到像素的转化过程，称为渲染流水线（Rendering Pipeline），包含5个核心阶段。

阶段 1：解析（Parse）

阶段 2：样式计算（Style）

阶段 3：布局（Layout）

阶段 4：分层与绘制（Paint）

// 绘制记录示例（伪代码）
drawRect(0, 0, 100, 100, color: '#409EFF')
drawText('Hello', 10, 50, font: '16px Arial')
drawImage(img, 0, 0, 200, 200)

阶段 5：分块、光栅化与合成（Composite）

这是浏览器渲染的精华部分，也是性能优化的关键。

五、帧渲染与性能优化

流畅的动画需要60fps（每秒60帧），即每帧只有16.6ms。浏览器需要在这极短时间内完成所有渲染工作。

5.1 性能优化黄金法则

5.2 重排、重绘、合成对比

5.3 实战案例：滚动性能优化

// 滚动时频繁修改DOM
window.addEventListener('scroll', () => {
  const scrollTop = document.documentElement.scrollTop;
  document.querySelector('.header').style.height = (100 - scrollTop / 10) + 'px'; // 触发重排
});

// 使用 transform 替代修改尺寸
window.addEventListener('scroll', () => {
  const scrollTop = document.documentElement.scrollTop;
  const scale = Math.max(0.5, 1 - scrollTop / 1000);
  document.querySelector('.header').style.transform = `scaleY(${scale})`; // 仅触发合成
}, { passive: true }); // passive 告知浏览器不会调用 preventDefault

六、关键技术总结