Appearance
渲染流水线：DOM、CSSOM、Layout、Paint、Raster 与 Composite
主题边界
- 页面显示不是一句“浏览器自动渲染”就能概括，真正发生的是解析、样式计算、布局、绘制、栅格和合成。
- 理解这条链路，才能解释为什么有的修改触发布局，有的只重绘，有的可以直接走合成。
机制与流程
- HTML 解析生成 DOM，CSS 解析生成 CSSOM；两者结合后浏览器才能做样式计算。
- Layout 决定盒子的几何信息，Paint 生成绘制指令，Raster 把结果变成位图/纹理，Composite 再把多个图层组合成最终帧。
transform、opacity等属性在图层已存在时，常可以跳过 layout/paint，直接由 compositor 更新。
关键差异
- Layout 关心几何，Paint 关心像素，Composite 关心图层组合；三者不是同一层的“刷新”。
- “只走合成”通常更便宜，但图层提升也有显存和管理成本，并不是越多越好。
边界条件
opacity: 0不自动等于“只有 GPU 成本”；是否成层、是否大面积重绘仍要看实际渲染条件。- 读取
offsetWidth、getBoundingClientRect()等布局信息时，浏览器可能被迫立即结算前面的改动。
工程落点
- 动画优化的核心是减少 layout 和大面积 paint，而不是盲目宣称“使用 GPU”。
- DevTools 的 Performance、Layers、Rendering 面板都要结合这条流水线来读。