如何通过简化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 背景（线性/径向渐变在缩放或滚动中反复重采样）

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

用transform/opacity替代的实操边界

光知道“要用transform”不够，得知道什么时候它会失效：

立即学习“前端免费学习笔记（深入）”；

• 如果元素父容器设置了overflow: hidden，而transform导致子元素溢出，某些安卓WebView会退化为软件渲染
• opacity在旧版微信内置浏览器（如X5内核 v6.8以下）里可能仍触发Paint，需搭配will-change: opacity且仅在动画前动态加
• 别对position: fixed元素狂用transform——部分Android机型会丢失固定定位锚点，造成抖动

稳妥写法：transform: translateZ(0) scale(1) 可强制创建独立合成层，但别全局加，只加在明确要动的元素上。

infinite动画+全屏图片=发热组合拳

你写@keyframes fade { 0% { opacity: 0.8; } 100% { opacity: 1; } }配animation: fade 3s infinite，看着只是微微呼吸，其实浏览器每秒都在调度合成任务。加上全屏<img>，内存纹理没释放，GPU持续喂帧——这就是“静置发烫”的根源。

解法很直接：

• 把infinite换成有限次数：animation-iteration-count: 3
• 全屏图改用background-image + background-size: cover，避免<img>自带的解析/解码开销
• 动画空闲时主动停掉：element.style.animationPlayState = 'paused'，比如用户切到其他tab页时

最易忽略的一点：动画结束后，transform留下的矩阵不会自动清零，残留的3D变换状态会让浏览器持续维护合成层——记得用transform: none或重置为translate(0, 0)收尾。