filter:blur 会因软件渲染导致掉帧，需用 translatez(0) 或 will-change 触发 gpu 加速；blur(0px) 仍有性能开销，应改用 filter:none；safari 兼容性差，大图需先缩放再模糊，移动端慎用高值。
filter:blur 会让图片变糊，但默认不触发硬件加速
直接写 filter: blur(4px) 看起来有效，但滚动或动画时容易掉帧。因为 CSS filter 默认走软件渲染，尤其在 Safari 和旧版 Chrome 上更明显。
实操建议：
- 给图片加
transform: translateZ(0)或will-change: filter，强制启用 GPU 加速 - 避免对大图（比如 >2000px 宽）直接 blur，先用
object-fit: cover缩放到视口尺寸再虚化 - 如果虚化用于背景图，优先用
::before伪元素 +background-image，而不是给<img alt="CSS如何给图片添加模糊效果_通过filter:blur实现虚化css" >本身加 filter
blur 值为 0 时仍可能触发重绘
即使设成 filter: blur(0px)，浏览器仍会当作一个 active filter 处理，影响合成层判断。这不是“没效果”，而是“有开销但没视觉变化”。
常见错误现象：
立即学习“前端免费学习笔记（深入）”；
- 用 JS 动态切换
blur(0px) ↔ blur(6px)，发现首次切回 0 时仍有卡顿 - 配合
transition: filter 0.3s，从模糊到清晰的过渡末尾发涩
解决办法：
- 彻底移除
filter样式（比如用 class 控制，而非内联 style 覆盖） - 或者用
filter: none替代blur(0px)—— 两者视觉一致，但none是明确的“退出状态”
Safari 对 filter:blur 的兼容性很脆
iOS 15.4 之前，filter: blur() 在 <img alt="CSS如何给图片添加模糊效果_通过filter:blur实现虚化css" > 上会失效；iOS 16.4 又修复了部分场景，但对 background-image + blur() 仍不支持。
使用场景判断：
- 如果是用户上传头像后实时预览模糊效果 → 必须降级：用 Canvas 绘制并高斯模糊，再转成 data URL
- 如果是静态背景虚化（比如毛玻璃效果）→ 改用
-webkit-backdrop-filter: blur(10px)，仅限支持 backdrop-filter 的容器内 - 检查是否被父级
overflow: hidden截断：Safari 下blur溢出部分会被直接裁掉，得加padding补偿
blur 值越大，内存和绘制压力越明显
不是线性增长。blur 半径每增加 1px，计算量约上升 3–4 倍，尤其在 Retina 屏上会按设备像素比放大采样范围。
性能提示：
- 避免在
:hover中突然应用blur(12px)—— 首次渲染可能卡顿 100ms+ - 移动端慎用超过
blur(8px)，低端安卓机容易触发渲染超时，页面白屏半秒 - 可以用
filter: url(#blur)引入 SVG 滤镜，它比 CSSblur()更可控，也更容易被缓存
虚化不是开关，是权衡：模糊半径、设备能力、触发时机，三者稍一错位，效果就变成卡顿源。别只盯着样式写了没，要看它什么时候真正开始画。
