box-shadow导致手机cpu高负载，因其每次变化均触发全层重绘，需cpu逐像素计算阴影；同属高代价属性的还有border-radius、background-image、filter（blur/drop-shadow）、gradient；应优先用transform/opacity替代，但需注意overflow: hidden、旧版微信内核、fixed定位等失效场景；infinite动画叠加全屏图片会持续占用gpu资源致发热，应限制迭代次数、改用background-image、空闲时暂停动画并重置transform。
为什么box-shadow会让手机CPU狂转
因为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)收尾。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
