浏览器原理及渲染机制

# 一、浏览器整体架构（宏观认知）

现代浏览器（以 Chrome / Chromium 为例）是多进程架构：

浏览器主进程
 ├── 网络进程
 ├── GPU 进程
 ├── 渲染进程（每个 Tab / iframe）
 │     ├── JS 引擎（V8）
 │     ├── 渲染引擎（Blink）
 │     ├── 事件循环
 │     └── Web API
 └── 插件进程

1
2
3
4
5
6
7
8
9

# 为什么要多进程？

✅ 安全（沙箱隔离）
✅ 稳定（一个页面崩溃不影响其他）
✅ 性能（并行执行）

# 二、从输入 URL 到页面显示（完整链路）

这是面试必考主线。

# 1️⃣ URL 解析

补全协议
判断是搜索还是网址
DNS 解析 → IP

# 2️⃣ 网络请求（Network）

TCP 三次握手
HTTPS：TLS 握手
HTTP 请求 / 响应
缓存策略（强缓存 / 协商缓存）

# 3️⃣ 构建 DOM & CSSOM（渲染前置条件）

HTML ──> DOM Tree
CSS  ──> CSSOM Tree

1
2

⚠️ CSS 会阻塞渲染
⚠️ JS 会阻塞 DOM 解析

# 三、关键：浏览器渲染流水线（核心）

# 🌈 浏览器渲染五大阶段

DOM + CSSOM
   ↓
Render Tree
   ↓
Layout（回流 / 重排）
   ↓
Paint（重绘）
   ↓
Composite（合成）

1
2
3
4
5
6
7
8
9

下面逐个拆解。

# 四、Render Tree（渲染树）

渲染树 ≠ DOM 树

特点：

只包含可见节点
display: none ❌
visibility: hidden ✅（占位）

DOM + CSSOM → Render Tree

# 五、Layout（回流 / 重排）

👉 计算元素的几何信息

位置
宽高
盒模型

# 触发回流的操作（⚠️ 性能杀手）

改变：
- width / height
- padding / margin
- position / display
读取：
- offsetTop
- clientHeight
- getBoundingClientRect()

📌 回流一定会导致重绘

# 六、Paint（重绘）

👉 把像素绘制到位图

触发重绘但不回流：

color
background
box-shadow
outline

📌 重绘不一定回流

# 七、Composite（合成 / GPU 加速）

👉 多个图层交给 GPU 合成

# 能触发合成层（重点）

transform
opacity
will-change
position: fixed
video / canvas

✨ 只走 Composite，性能最好

# 八、JS 与渲染的关系（事件循环）

# JS 是单线程的

JS 执行时
渲染会被阻塞

# Event Loop 简化模型

宏任务（script / setTimeout）
   ↓
微任务（Promise / MutationObserver）
   ↓
渲染（layout / paint）

1
2
3
4
5

📌 微任务清空后才会渲染

# 九、浏览器优化策略（工程实践）

# 1️⃣ 减少回流

// ❌ 多次回流
el.style.width = '100px'
el.style.height = '100px'

// ✅ 合并
el.style.cssText = 'width:100px;height:100px'

1
2
3
4
5
6

# 2️⃣ 读写分离

// ❌
el.style.width = el.offsetWidth + 10 + 'px'

// ✅
const w = el.offsetWidth
el.style.width = w + 10 + 'px'

1
2
3
4
5
6

# 3️⃣ 使用 transform 替代 top/left

/* ❌ */
left: 100px;

/* ✅ */
transform: translateX(100px);

1
2
3
4
5

# 十、浏览器渲染相关高频面试题

# ❓ 为什么 CSS 放在 head，JS 放在 body？

CSS 阻塞渲染
JS 阻塞 DOM 解析

# ❓ async vs defer

属性	是否阻塞	执行时机
async	❌	下载完成立即执行
defer	❌	DOM 解析完成后

# ❓ requestAnimationFrame

在 下一帧渲染前执行
适合动画

上次更新: 2026/01/07, 09:20:46

← 静态资源灰度发布 Chrome DevTools 渲染分析实战→