blur() 卡顿源于 cpu 渲染，需用 filter + translatez(0) 强制 gpu 加速，但须严格限制范围；低端设备应降级为无模糊或 canvas 均值模糊，并禁用 blur 动画。
blur() 卡顿不是写法错，是默认走 CPU 渲染
在 Android 5–7 WebView、低端 iOS 设备（如 iPhone 6/6s）、或 window.devicePixelRatio === 1 的老旧平板上，filter: blur() 几乎必然触发 CPU 渲染路径。它不会自动进 GPU 合成层，哪怕加了 will-change: filter 也无效——浏览器根本无法预判模糊参数变化，只会白占内存。
实测中，blur(2px) 在 MT6737（Android 6.0）上就足以让 60fps 动画掉到 40fps 以下；blur(8px) 更可能直接卡成幻灯片。这不是“有点慢”，而是每帧都在主线程做高斯卷积，显存占用随半径平方级增长。
- 用 Chrome DevTools → Rendering → Paint flashing，绿色高亮集中在模糊区域，就是它在拖后腿
-
backdrop-filter比filter略好，但 iOS 16.4 之前基本不触发 GPU 加速 - 禁用
will-change: filter——它不生效，还干扰图层管理，容易引发 OOM
强制 GPU 加速的唯一可靠写法
跨浏览器真正能稳定创建合成层的组合只有：filter + transform: translateZ(0) 或 translate3d(0, 0, 0)。但必须严格限制使用范围，否则图层爆炸。
关键不是“加了就快”，而是“只给该升的升”。例如轮播图外层、模态框背景这种持续存在且需动画的容器可以加；列表项、卡片循环渲染时绝对不能每个都加。
- 正确示例：
.modal-bg { filter: blur(10px); transform: translateZ(0); } - 错误示例：
.list-item { will-change: filter; }→ 百个 item = 百个图层，移动端显存瞬间吃紧 - 父容器已升层，子元素再加
translateZ(0)属冗余操作，无收益反增开销 - 用 DevTools → Layers 面板搜索
filter，确认目标元素真有独立绿框图层；没绿框=还在主线程跑
降级与替代：用零运行时开销模拟模糊感
当设备检测为低端（如 max-width: 480px 且 -webkit-device-pixel-ratio: 1），应直接关闭模糊，改用低成本视觉方案。
静态场景优先预渲染，动态场景靠渐变或低分辨率 Canvas 拉伸——它们不依赖每帧重绘，性能曲线平直。
- 伪元素模拟阴影：
::after { background: linear-gradient(to bottom, rgba(0,0,0,0.1), transparent); height: 4px; } - 媒体查询降级：
@media (max-width: 480px) and (-webkit-device-pixel-ratio: 1) { .glass { filter: none; } } - Canvas 模糊降级：先缩放源图（
scale = 0.33），再用均值模糊（非高斯），快 5–8 倍：ctx.drawImage(srcImg, 0, 0, canvas.width, canvas.height) - 毛玻璃效果务必用
backdrop-filter而非filter，并限制半径 ≤ 10px，配合rgba()透明背景才生效
动画阶段必须规避 blur() 动态变化
绝对不要在 @keyframes 或 transition 中动画 blur() 值。从 blur(0px) → blur(12px) → blur(0px) 的过程，会反复触发图层创建/销毁，比静态模糊更耗资源。
如果需要悬停反馈，改用 opacity + 极小值 blur(1px) 组合过渡，或干脆放弃模糊，用 contrast() + brightness() 微调来营造“聚焦感”。
- 安全写法：
.card { transition: opacity 0.2s, filter 0.2s; } .card:hover { opacity: 0.95; filter: blur(1px) contrast(105%); } - 危险写法：
@keyframes float { 0% { filter: blur(0px); } 50% { filter: blur(6px); } }→ 每帧重绘，低端机必卡 - 动画结束必须清空
transform（如translateZ(0)），否则图层常驻，内存持续占用
blur(10px) 在 200×200 区域上运行尚可，放大到全屏容器时，计算量直接翻 4 倍以上。与其调参，不如早做设备分级 + 视觉降级。前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
