⚡ 30 秒速记

• 核心判断：页面从 HTML/CSS 解析到布局、绘制和合成是一条流水线，变更命中哪一层决定更新成本
• 原理主线：围绕 「浏览器的内部结构」、「Chrome 多进程架构」、「浏览器中页面的渲染过程」 建立输入、状态变化与输出之间的因果关系
• 文章范围：解析了浏览器页面渲染的完整流程，包括浏览器的内部结构、Chrome多进程架构、各子系统与线程的协作，以及从输入URL到页面显示的关键步骤，帮助前端开发者深入理解页面渲染原理与性能优化要点。
• 边界与代价：浏览器会批量延迟样式计算，但同步读取布局可能强制刷新；合成层也不是越多越好
• 工程落地：优化应使用性能面板确认主线程、布局、绘制与合成瓶颈，再减少对应阶段的工作量

页面渲染是一条从解析、布局、绘制到光栅化与合成的流水线，样式变更命中哪一环，决定了更新成本。 浏览器解析 HTML 和 CSS 得到页面结构与样式，再计算元素几何信息和绘制顺序，最后把结果转换成像素显示。尺寸或位置变化通常会触发布局和重绘，只有颜色变化时一般不必重新计算几何信息。合成层可以由合成器线程处理移动，但分层也应按实际渲染表现验证。

这篇文章不要按 API 清单来背。先用上面的 Mind Map 建立全局结构，再通过交互 DEMO 观察正常路径和边界路径如何改变状态；阅读正文时重点核对每一步的输入、负责执行的参与者、产生的中间状态以及最终可观察结果。遇到版本敏感结论，要把“历史实现”“当前行为”和“工程兼容策略”分开说明；遇到性能或架构取舍，则用实际指标、失败现象和验证手段支撑判断。

版本校准： 原理文章中的代码代表特定实现与写作时间。应用到当前项目时，应先确认浏览器、框架或工具的主版本，再区分稳定的规范语义、可变化的内部实现和项目自身约束。

浏览器的内部结构

从结构上来说，浏览器主要包括了八个子系统：用户界面、浏览器引擎、渲染引擎、网络子系统、JavaScript 解释器、XML 解析器、显示后端、数据持久性子系统

这些子系统组合构成了我们的浏览器。页面的加载和渲染过程，离不开网络子系统、渲染引擎、JavaScript 解释器和浏览器引擎。

以前端开发最常使用的 Chrome 浏览器为例， Chrome 浏览器是使用多进程架构的方式来管理这些子系统。

Chrome 多进程架构

Chrome 浏览器采用的多进程架构，主要包括四个进程

• 浏览器进程：选项卡之外的所有内容都由浏览器进程处理，浏览器进程则主要用于控制和处理用户可见的 UI 部分（包括地址栏，书签，后退和前进按钮）和用户不可见的隐藏部分（例如网络请求和文件访问）
• GPU 进程：该进程用于完成图像处理任务，同时还支持分解成多个进程进行处理
• 渲染器进程：Chrome 浏览器中支持多个选项卡，其中每个选项卡在单独的渲染器进程中运行，渲染器进程主要用于控制和处理选项卡中的网站内容显示
• 插件进程：管理 Chrome 浏览器中的各个插件