低配安卓机上filter: blur()掉帧主因是Android 5–7 WebView等默认CPU软件渲染，高斯卷积开销大；iOS Safari 15.4前backdrop-filter支持弱。可选轻量替代：opacity/contrast、drop-shadow（Chrome84+/Safari13.1+）、小参数box-shadow、伪元素渐变、Canvas均值模糊；禁止单独过渡blur，慎用will-change与冗余提升，需设备分级fallback。
为什么低配安卓机上filter: blur()一开就掉帧
不是“参数调小点就行”，而是底层渲染路径根本不同：Android 5–7 WebView 和旧版 Chrome 中，blur() 和 drop-shadow() 默认走 CPU 软件渲染，每帧都要对整块区域做高斯卷积。实测 MT6737 芯片设备上，单个 filter: blur(2px) 就能让 60fps 动画跌到 40fps 以下。iOS Safari 15.4 之前对 backdrop-filter 的支持也极弱，开了等于白开。
哪些CSS模糊/阴影能勉强跑得动
不是全盘禁用，而是分层取舍：
-
filter: opacity(0.9)和filter: contrast(110%)属于轻量级，现代浏览器基本可进 GPU 合成器，风险低 -
filter: drop-shadow()在 Chrome 84+、Safari 13.1+ 中比box-shadow更易触发硬件加速，但不支持spread，且模糊值 > 8px 时 iOS WebKit 会回退 CPU -
box-shadow自身只要控制blur-radius ≤ 4px、透明度 ≤ 0.08（如rgba(0,0,0,0.08)），并配合transform: translateZ(0)强制合成层，多数低端安卓也能稳住 60fps -
backdrop-filter: blur(10px)在 iOS 上必须搭配background-color: rgba(255,255,255,0.1)才生效，否则直接被忽略
真要保留视觉层次，优先换方案而非调参数
硬扛性能不如换思路：
- 卡片阴影不用
filter: drop-shadow()，改用伪元素渐变：::after { background: linear-gradient(to bottom, rgba(0,0,0,0.08), transparent); height: 4px; } - 需要毛玻璃感？用 Canvas 缩放 + 均值模糊：先将图缩到 1/3 尺寸，再做半径为 2 的均值采样，比 CSS
blur()快 5–8 倍，且可控降质 - 悬停动画禁止单独过渡
blur()，改用contrast()+brightness()组合，并确保 hover 状态下blur()值 ≤ 1px 或干脆设为 0 - 动态阴影改用 CSS 变量控制
box-shadow的单个参数，如--shadow-blur: 2px，避免拼接字符串或滥用calc()
最容易被忽略的三个坑
很多团队加了 will-change: filter 或 transform: translateZ(0) 后反而更卡，问题不在写法，在滥用：
立即学习“前端免费学习笔记（深入）”；
- 别给每个列表项加
will-change: filter：浏览器无法预判参数变化，会提前分配大量内存，低端安卓容易 OOM - 父容器已用
transform: translate3d(0,0,0)提升，子元素再加translateZ(0)是冗余提升，无收益反增开销 - 动画中频繁切换
filter值（如blur(0px) → blur(6px) → blur(0px)）会触发图层反复创建销毁，应限制为“开/关”两级状态 - 你以为移除了
filter就安全了？只要页面里还存在一个未移除的filter声明（哪怕注释掉了），某些安卓 WebView 仍会持续分配资源
@supports (backdrop-filter: blur(1px)) 或 UA 检测做 fallback 分支——这点常被跳过，但恰恰是上线前最该卡住的环节。 
