Don't Animate Height
10 months ago
- #Browser Rendering
- #Performance Optimization
- #CSS Animations
- Granola应用在M2芯片MacBook上占用60% CPU和25% GPU，问题源于CSS动画
- Chrome开发者工具发现'操作栏'因CSS高度过渡导致每帧重绘
- 动画中的'height'属性会触发布局、绘制和合成，性能开销大
- 更优方案是使用仅触发合成的'transform'和'opacity'属性
- 最终采用'transform: translate'模拟高度变化，CPU占用从15%降至6%，GPU占用显著下降
- 理解浏览器渲染流程对CSS动画优化至关重要