# 浏览器渲染机制与全链路内存分析 — 学习路线图
第一阶段补充（P0 优先级）：补全 V8 ↔ 渲染 ↔ 内存 的知识缺口 面向：初级 H5 游戏程序员 | 前置：2_1_v8Learn + 2_2_h5-rendering-mastery 预计学习时间：2-3 周
这个项目是什么？
你已经学了 V8 引擎（JS 怎么被编译和执行）和 H5 渲染（GPU 怎么把数据变成画面）。 但这两个项目之间有一条裂缝：
- V8 项目讲了 JS 堆内存，但没讲 JS 堆之外的浏览器内存（DOM、GPU 显存、图片解码缓冲……）
- 渲染项目讲了 GPU 管线和 DrawCall，但没讲浏览器怎么把 HTML/CSS/JS 变成像素
- 游戏里加载 100 张图后内存暴增，用
--trace-gc却看不到，因为那是 GPU 显存
本项目就是填这条裂缝的。 学完后，你能画出从 JS 代码到屏幕像素的完整链路，并能定位任意一个内存增长点。
学习路线
第01章：浏览器渲染管线详解
▼
第02章：合成层与GPU加速
▼
第03章：重排与重绘优化
▼
第04章：事件循环与渲染时序
▼
第05章：浏览器全链路内存全景图 ⭐ 核心
▼
第06章：JS堆与GPU显存桥梁 ⭐ 核心
▼
第07章：内存泄漏排查SOP ⭐ 核心
▼
第08章：Node.js 服务端内存
▼
第09章：H5游戏内存优化实战
▼
第10章：性能预算与监控体系
章节详细目录
| 章节 | 核心内容 | 关键实践 |
|---|---|---|
| 第01章 | DOM构建、CSSOM、Layout、Paint、Composite | Layers面板分析层爆炸 |
| 第02章 | 合成层创建条件、will-change、层爆炸、显存计算 | 检测并修复层爆炸 |
| 第03章 | Reflow/Repaint触发条件、强制同步布局、优化策略 | Performance面板定位长任务 |
| 第04章 | 宏任务/微任务/rAF时序、游戏主循环、固定时间步 | rAF vs setInterval对比 |
| 第05章 | 浏览器进程内存、五大内存区域、Chrome Task Manager | 计算游戏场景显存占用 |
| 第06章 | 纹理上传链路、WebGL资源释放、纹理压缩格式 | 实现显存统计工具 |
| 第07章 | Memory面板、三快照对比法、5种泄漏模式、排查SOP | 制造泄漏→定位→修复 |
| 第08章 | process.memoryUsage()、Buffer堆外内存、Stream背压 | Buffer vs 数组内存对比 |
| 第09章 | 纹理管理器(LRU)、对象池、合批策略、优化检查清单 | 实现纹理管理器+对象池 |
| 第10章 | 性能预算设定、RUM监控、告警机制、Performance面板 | 搭建内存监控看板 |
学习建议
- 按顺序学习：第01→02→03→04→05→06→07→08→09→10，每章都依赖前一章
- 第05章、第06章、第07章是核心：至少看两遍，动手做所有实践
- 边学边用：打开 Chrome DevTools 对照着操作
- 对比 2_1：V8 的 GC 知识在本项目第07章直接用到
- 对比 2_2：纹理上传链路在本项目第06章详细解释
文档版本：2026年4月（精品合并版） 核心认知：浏览器内存 ≠ V8堆，GPU显存才是游戏内存的大户