旧版 Edge（12–15）不支持 filter，所谓“卡顿”实为脚本阻塞或渲染异常；应通过 CSS.supports('filter', 'blur(0)') 实测检测并彻底移除 filter 声明，改用 SVG 滤镜（仅限静态图）或 opacity/transform 降级方案。
旧版 Edge（12–15）根本不支持 filter，所谓“卡顿”其实是假象——它压根没执行模糊，但 JS 或动画逻辑可能还在尝试读取或切换该属性，导致渲染管线异常或脚本阻塞。真正要解决的不是“怎么让它快”，而是“怎么让它不拖慢”。
确认是否真在用旧版 Edge
Edge 12–15 已停止支持，但企业内网仍常见。别靠 UA 字符串判断，用 JS 实测更可靠：
-
window.CSS && CSS.supports('filter', 'blur(0)')返回false→ 确认不支持，直接跳过所有 filter 相关逻辑 -
navigator.userAgent.includes('Edge/1') && !navigator.userAgent.includes('Edge/16')是粗筛，但不如 CSS.supports 稳定 - 若检测到不支持，
document.documentElement.classList.add('no-filter')，后续用 class 控制降级样式
禁用 filter 声明，而非设为 blur(0px)
很多团队把 filter: blur(0px) 当作“关闭开关”，但在旧版 Edge 中，这行声明仍会被解析、缓存、参与层叠计算，甚至触发无效重排。实测中，残留的 filter: blur(0px) 比完全移除慢 12%～18%。
- 动态控制时，用
element.style.removeProperty('filter')，而不是element.style.filter = 'blur(0px)' - CSS 中避免写
.card { filter: blur(0px); transition: filter 0.3s; }—— 这会让旧版 Edge 把整个规则块当无效但持续解析 - 构建时可通过 PostCSS 插件自动剔除旧 Edge 不支持的 filter 声明，而非加前缀
用 SVG 滤镜替代，仅限静态背景图
IE/Edge 12–15 支持内联 SVG 滤镜，且不触发主线程高斯卷积，性能曲线平直。但它只适用于 <img> 或伪元素承载的背景图，不能用于动态内容。
Smart Ledger
下载
智能收支追踪器 — 通过自然语言快速记账，自动分类，生成日/周/月报告和趋势分析。 支持中文自然语言输入("今天午饭花了35元")，数据本地JSON存储保护隐私。 适用于个人财务管理、预算追踪和消费分析场景。
立即学习“前端免费学习笔记（深入）”；
- 写法示例：
<svg xmlns="http://www.w3.org/2000/svg"><defs><filter id="blur"><feGaussianBlur stdDeviation="2"/></filter></defs></svg>，然后img { filter: url(#blur); } - 注意：SVG 滤镜无法响应 CSS 变量或 JS 动态修改 stdDeviation，必须预设好值
- 对背景图，用伪元素 + SVG 滤镜比 Canvas 更轻量，且兼容性覆盖 Edge 12+
- 别对文字或复杂布局用 SVG 滤镜——它会把整块区域当位图处理，缩放失真严重
动画场景必须砍掉 filter 过渡
旧版 Edge 对 transition: filter 的实现是全帧重绘+软件合成，哪怕只是 blur(0px) → blur(1px)，也会让 60fps 动画掉到 20fps 以下。
- 悬停效果改用
opacity+transform: scale(1.01)模拟“轻微虚化感”，视觉差异小但性能提升显著 - 模态框背景模糊？直接切为半透明纯色：
background: rgba(255,255,255,0.7)，加一层::after渐变遮罩模拟景深 - 如果业务强依赖模糊动效，必须做运行时设备分级：检测
window.devicePixelRatio > 1.5 && screen.width > 1200才启用 filter 动画，其余一律降级
最易被忽略的一点：旧版 Edge 的渲染器不会报错，也不会警告，它只是默默吞掉 filter 并继续跑 JS —— 所以卡顿往往来自你“以为它在工作”的那段代码，而不是滤镜本身。
