如何通过简化CSS渲染（如减少box-shadow）减轻手机动画导致的发热问题？

本文共计739个文字，预计阅读时间需要3分钟。

因为`box-shadow`每次变化都强制触发展示全层重绘（Paint），而非简单欠动图层，而是逐像素重新计算阴影扩散、模糊半透、颜色叠加等效果——这种活儿只有CPU干得动，GPU帮不上忙。尤其在安卓低端机上，一个带有`box-shadow`的`transition`动画，帧率常掉到20fps以下，风连扇都不开，手机先闪瞎了。

哪些渲染属性会悄悄拖垮性能

除了box-shadow，这些也属于“高代价属性”，改一次就等于告诉浏览器：“请重画整块区域”：

• border-radius（尤其配合动画时，圆角抗锯齿计算量陡增）
• background-image（特别是未压缩的PNG或全屏SVG）
• filter: blur() 或 filter: drop-shadow()（比原生box-shadow更重）
• gradient 背景（线性/径向渐变在缩放或滚动中反复重采样）

它们共同点是：无法被合成器线程单独拎出来处理，必须和主文档流一起走完整绘制流水线。