CSS浏览器的渲染过程是浏览器将接收到的HTML、CSS等资源转换为用户可见页面的完整流程，整个过程包含多个环环相扣的阶段，每个阶段的处理逻辑都会影响最终的页面展示效果和性能。
渲染过程的核心阶段
1. 解析阶段
浏览器首先会解析HTML文档，构建DOM树，同时解析CSS资源，构建CSSOM树。DOM树是HTML元素的结构化表示，CSSOM树则是CSS样式规则的结构化表示，两者相互独立生成。
解析CSS时，浏览器会按照选择器的优先级和层叠规则处理样式，遇到外部CSS文件会优先加载并解析，再继续处理后续内容，这也是为什么CSS文件的加载会阻塞首次渲染的原因之一。
2. 构建渲染树
当DOM树和CSSOM树都构建完成后，浏览器会将两者结合，生成渲染树。渲染树只包含需要显示的可见元素，像<head>、设置了display:none的元素都不会被加入到渲染树中。
这一步会确定每个可见元素的最终样式，是所有后续布局、绘制操作的基础。
3. 布局（Layout）阶段
布局阶段也叫做重排（Reflow），浏览器会根据渲染树中每个元素的信息，计算出它们在页面中的确切位置和大小，确定元素的几何属性。
以下CSS属性或操作会触发布局阶段：
- 修改元素的宽高、边距、定位等几何属性
- 修改
display、float、position等影响布局的属性 - 读取
offsetWidth、clientHeight等几何相关的属性值
4. 绘制（Paint）阶段
绘制阶段浏览器会将布局阶段计算好的元素几何信息，转换为屏幕上的像素，包括填充颜色、边框、阴影、文字等视觉元素的绘制。
以下操作会触发绘制阶段：
- 修改
color、background-color、box-shadow等视觉相关属性 - 元素的可见性发生变化
绘制过程会将页面分为多个图层，每个图层独立绘制，避免每次修改都重新绘制整个页面。
5. 合成（Composite）阶段
合成阶段浏览器会将所有绘制好的图层按照正确的顺序合并，最终输出到屏幕上。合成操作由GPU完成，性能开销相对较低。
以下CSS属性会触发合成阶段，创建独立的合成图层：
transformopacityfilterwill-change设置为上述属性时
渲染过程优化建议
基于CSS浏览器渲染过程的特性，我们可以采取以下优化措施提升页面性能：
- 尽量避免频繁修改会触发重排的属性，优先使用
transform、opacity等只触发合成的属性实现动画效果 - 减少CSS选择器的嵌套层级，降低CSSOM树的构建和匹配成本
- 将CSS文件放在
<head>中加载，避免样式闪烁 - 对不会发生变化的元素使用
will-change提前创建合成图层，减少后续渲染开销
简单示例验证渲染阶段
以下代码可以展示不同CSS属性触发的渲染阶段差异：
<!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta charset="UTF-8">
<title>渲染过程示例</title>
<style>
.box {
width: 100px;
height: 100px;
background-color: red;
/* 使用transform触发合成阶段，不会触发布局和绘制 */
transition: transform 0.3s;
}
.box:hover {
transform: translateX(50px);
}
.text {
color: black;
/* 修改color会触发绘制阶段 */
transition: color 0.3s;
}
.text:hover {
color: blue;
}
</style>
</head>
<body>
<div class="box"></div>
<p class="text">测试文本</p>
</body>
</html>
上述代码中，.box的hover效果使用transform实现，只会触发合成阶段，性能更优；而.text的hover效果修改color属性，会触发绘制阶段，性能开销相对更高。
CSSbrowser_renderingpaintlayoutcomposite修改时间：2026-06-30 11:12:28