Appearance
重排、重绘与合成：渲染成本落在什么阶段
主题边界
- 样式变化可能触发布局、绘制和合成中的不同阶段，代价由受影响的树和属性类型决定。
- 要讨论这题，必须把它放到浏览器的 style -> layout -> paint -> composite 流水线里。
机制与流程
- 会影响几何信息的属性，如尺寸、位置、字体、盒模型，可能触发 layout；layout 之后通常还会连带 paint 与 composite。
- 只影响可见像素而不影响几何的属性，如
background-color，通常只触发 paint。 transform、opacity常可在合成阶段处理，但前提是元素已具备独立图层或被浏览器判断值得提升。
关键差异
- 重排对应 layout，重绘对应 paint；合成是把已栅格化的层按顺序拼到屏幕上。
- 合成层优化减少的是主线程布局/绘制压力，不代表完全没有代价。
边界条件
- 滥用
will-change或强行层提升会增加显存、栅格化和合成成本，移动端尤为明显。 - 读取布局信息如
offsetHeight、getBoundingClientRect()可能迫使浏览器立即提交前面的样式写入，形成强制同步布局。
工程落点
- 动画优化的第一原则不是“都用 transform”，而是尽量把变化限制在合成阶段并控制图层数量。
- 排查卡顿要结合 Performance 面板看长任务、布局次数、绘制面积和 layer count，而不是只凭经验判断。