filter: blur() 使页面卡顿因触发全层重绘并提升为独立图层，增大GPU压力；应仅对必要元素单独使用、避免嵌套、禁用在fixed/transform元素上，并用Layers面板监控图层分裂。
filter: blur() 为什么让整个页面变卡
因为 blur() 触发全层重绘，浏览器会把元素及其所有后代提升为独立图层，再做高斯模糊计算；一旦作用域过大（比如套在 或滚动容器上），GPU 内存和合成压力会陡增，帧率直接掉到 20fps 以下。
常见错误现象：scroll 卡顿、transform 动画掉帧、iOS 上模糊区域边缘闪烁。
- 只对真正需要模糊的
<div> 单独加 <code>filter: blur(4px)，别用父容器统一封装 - 用
will-change: filter提前提示合成器——但仅限动态变化频繁的元素，静态模糊反而增加内存开销 - 避免在
position: fixed或transform元素上叠加blur()，容易触发额外图层分裂 - 检查 DOM 结构，确保模糊只施加在最外层遮罩层（如
.backdrop），内部内容必须是清晰的 - 如果需要局部弱化，改用
opacity或background-color: rgba()，而非二次blur() - 用 Chrome DevTools 的
Layers面板确认是否出现多层Filter Layer，有则说明嵌套已生效 - 固定用
px单位，避免rem、%或vw - 给模糊容器设最小尺寸：
min-width: 100px; min-height: 100px - 必要时降级：用
@supports not (filter: blur(1px))回退到半透灰背景 - 必须配合
background-color: rgba(255,255,255,0.8)使用，否则在支持设备上可能透出空白 - 禁止在
或上用，只适用于有明确背景色的定位容器（如position: sticky的 header） - 避免与
overflow: hidden同时使用，某些 Android WebView 会截断模糊溢出区域
嵌套 blur 导致模糊强度失控
多个 filter: blur() 嵌套不是简单叠加，而是逐层采样模糊，视觉上会出现“脏边”或“雾化过重”，且性能是指数级恶化。
使用场景：模态框背景模糊 + 内部卡片也加了 blur() —— 这属于典型误用。
立即学习“前端免费学习笔记（深入）”；
移动端 iOS Safari 的 blur 渲染异常
iOS 15+ 虽支持 filter: blur()，但对非整数像素值（如 blur(3.5px)）或小尺寸元素（宽高
参数差异：blur(4px) 在 iOS 上比 blur(3px) 更可靠，而 blur(0.5rem) 会因视口缩放导致计算偏差。
用 backdrop-filter 替代 filter 实现背景模糊
当目标只是“毛玻璃”效果（比如导航栏下透出滚动内容），backdrop-filter: blur(8px) 比 filter 更轻量——它只模糊背后图层，不提升当前元素为合成层，也不影响子元素绘制。
性能 / 兼容性影响：Chrome 103+、Safari 9+ 支持，Firefox 需开启 layout.css.backdrop-filter.enabled 标志；不支持时自动降级为透明背景，无崩溃风险。
模糊效果不是视觉糖，是合成负担。最容易被忽略的是：你加的每一处 blur()，都在悄悄申请 GPU 图层——而多数项目根本没配好图层回收策略。
