什么是浏览器的GPU加速？哪些操作会触发硬件加速？

GPU加速是指使用GPU来处理某些渲染任务，提升性能。

为什么需要GPU加速：

• CPU处理图形性能有限
• 页面动画要求60fps
• 3D变换计算量大

触发GPU加速的属性：

1. transform：translate3d、rotate3d等
2. opacity： opacity变化
3. filter：模糊、阴影等
4. will-change：声明将要变化的属性

transform和opacity为什么高效：

• 不触发重排和重绘
• 在合成层单独处理
• 不影响其他元素

will-change使用：

• 提前告知浏览器准备加速
• 但不要滥用
• 动画开始前设置，结束后清除

注意事项：

1. 过多合成层占用显存
2. 移动端慎用，会增加耗电
3. 不要对太多元素使用will-change

面试追问：为什么动画推荐用transform而不是left/top？因为left/top会触发重排，而transform只触发合成，操作更轻量。