浏览器渲染过程是将 HTML、CSS 和 JavaScript 转化为可视化页面的复杂流程，主要分为以下几个关键阶段：
1. 解析（Parsing）
HTML 解析：浏览器将 HTML 文本转换为 DOM（文档对象模型）树，标记之间的嵌套关系会形成树的层级结构
CSS 解析：将 CSS 样式转换为 CSSOM（CSS 对象模型）树，记录所有选择器及其对应的样式规则
阻塞行为：HTML 解析会被
<script>标签阻塞（除非使用defer或async），而 CSS 解析会阻塞 JavaScript 执行
2. 样式计算（Style Calculation）
结合 DOM 和 CSSOM，计算每个 DOM 节点最终的样式（计算样式）
处理继承和层叠规则，解决样式冲突
生成渲染树（Render Tree）：仅包含可见元素（排除
display: none的元素）
3. 布局（Layout）
也称为回流（Reflow），计算渲染树中各元素的几何信息
确定每个元素的位置、大小、排列方式等
布局是递归的，父元素的布局变化可能会影响子元素
4. 绘制（Painting）
也称为重绘（Repaint），将布局后的元素绘制到屏幕上
包括设置颜色、背景、阴影、文本等视觉属性
可以将元素分解为多个图层独立绘制，提高效率
5. 合成（Compositing）
将所有绘制好的图层按照正确的顺序合并，形成最终的屏幕图像
处理图层间的重叠关系、透明度等
由 GPU 加速处理，提高动画和滚动性能
关键优化点
减少布局（回流）次数：布局计算成本高，避免频繁修改宽高、位置等属性
合理使用图层：对动画元素使用
will-change: transform创建独立图层优化选择器性能：避免过于复杂的 CSS 选择器
控制 JavaScript 执行：避免长任务阻塞渲染