📺 浏览器渲染性能可视化

交互式演示：探索浏览器从 HTML/CSS 到屏幕像素的完整渲染流程

🏗️ 关键渲染路径（Critical Rendering Path）

点击每个步骤查看详细说明，或点击"自动演示"观察完整流程

HTML

Bytes

HTML 字节流

➡

</>

Token

词法分析

➡

DOM

DOM Tree

文档对象模型

➡

CSS

CSSOM

CSS 对象模型

➡

Render Tree

渲染树合成

➡

▦

Layout

布局计算

➡

🎨

Paint

绘制

➡

✨

Composite

合成

点击上方步骤 查看每阶段的详细说明，或点击下方按钮启动自动演示。

📋 渲染管线各阶段耗时模拟

DOM 构建

3ms

CSSOM 构建

2.5ms

Render Tree

2ms

Layout

5.5ms

Paint

3.8ms

Composite

1.2ms

⚡ 重排（Reflow）vs 重绘（Repaint）对比演示

点击下方按钮触发不同的渲染操作，观察性能差异

📝 重排操作

改变几何属性 — 触发 Layout + Paint

Reflow

⚠ 重排成本高：每个重排操作约 3-8ms

🎨 重绘操作

改变外观属性 — 仅触发 Paint

Repaint

✅ 重绘成本中：每个重绘操作约 1-3ms

✨ 合成层操作

使用 transform/opacity — 仅触发 Composite

Composite

✅ 合成成本最低：仅约 0.2-0.8ms（GPU 加速）

💥 布局抖动演示

连续读写布局属性造成强制重排

未检测到抖动

📋 重排 / 重绘触发器列表

点击触发项执行对应的渲染操作

🗈️ 合成层（Composite Layers）可视化

以下模拟了浏览器中各合成层的分布。每层由 GPU 独立处理为纹理，最终合成到屏幕。 GPU 加速

根层（Root Layer）文档背景

固定定位层position: fixed

视频层<video>

3D 变换层transform: translateZ

滚动层overflow: scroll

动画层will-change / opacity

根层

固定定位

视频/Canvas

3D 变换

滚动层

动画层

⚙️ 渲染引擎工作线程

🧰 主线程（Main Thread）

📄 JavaScript 执行
🏗️ 样式计算（Style）
▦ 布局（Layout）
🎨 绘制（Paint）

🧰 合成器线程（Compositor Thread）

🗈️ 图层合成
✨ GPU 纹理操作
🔄 帧提交
✔ 不阻塞主线程

📊 渲染性能测量

实时 FPS 监控与操作耗时对比。点击下方按钮执行不同操作，观察渲染性能数据变化。

FPS: 60

⚡ 重排耗时
0
ms

🎨 重绘耗时

✨ 合成耗时

📀 帧渲染时间

16.67

ms（目标）

📋 操作耗时对比表

操作类型	触发属性	是否触发重排	是否触发重绘	典型耗时
改变 width	width	是	是	4-8ms
改变 height	height	是	是	4-8ms
改变 margin	margin	是	是	3-6ms
改变 color	color	否	是	1-3ms
改变 background	background-color	否	是	1-3ms
transform 位移	transform	否	否	0.2-0.8ms
opacity 变化	opacity	否	否	0.1-0.5ms