🖥️ 浏览器渲染机制：从 DOM 树到复合层的关键性能优化点

理解浏览器的工作流程

前端性能优化需要深入理解浏览器如何将 HTML/CSS/JS 转换为屏幕上的像素。整个渲染流程大致可分为以下关键阶段：

1. **构建树：** 解析 HTML 生成 **DOM Tree**；解析 CSS 生成 **CSSOM Tree**。
2. **渲染树：** DOM Tree 和 CSSOM Tree 合并形成 **Render Tree**。
3. **布局 (Layout/Reflow)：** 计算元素在视口中的精确位置和大小。
4. **绘制 (Paint)：** 填充像素，绘制文本、颜色、边框等。
5. **复合 (Compositing)：** 将不同的层（Layer）合成为最终图像，并显示在屏幕上。

性能优化的核心原则是 **避免 Reflow 和 Repaint**。频繁改变元素的几何属性（如 `width` 或 `top`）会导致 Reflow。推荐使用 CSS 属性 **`transform` 和 `opacity`**，因为它们通常可以在独立的 **复合层（Compositor Layer）** 上进行，利用 GPU 加速，只触发 **复合** 阶段，性能最优。理解这一流程，能让您的性能优化工作 事半功倍。