IE全系不支持CSS filter，实际运行的是CPU渲染的旧版DX滤镜（如alpha、Blur），易引发重排重绘风暴；Blur半径每+1耗时×1.8倍，多滤镜叠加串行执行，且需position:relative或zoom:1才生效。
IE 全系不支持 filter，写了等于白写，所谓“性能异常”其实是根本没生效，或者你误用了其他 IE 专有滤镜（如 alpha、progid:DXImageTransform.Microsoft.Blur）导致的卡顿或错位。
为什么在 IE 里看到 filter 相关卡顿或白屏？
因为你在 IE 中实际运行的不是 filter: blur(2px)，而是降级用的 filter: progid:DXImageTransform.Microsoft.Blur 或 filter: alpha(opacity=XX)。这些旧版 DirectX 滤镜由 CPU 软件渲染，且强制触发 hasLayout，极易引发重排重绘风暴：
-
Blur滤镜在 IE6–IE9 中是逐像素 CPU 卷积，模糊半径每 +1，耗时约 ×1.8 倍；Blur(pixelRadius=4)在 Core2 Duo 上单帧可超 80ms -
alpha滤镜若作用于含子元素的容器，会连带模糊整个 DOM 子树，滚动时触发全层 repaint - 多个
filter声明叠加（比如同时写alpha+gradient），IE 渲染引擎会串行执行，无并发优化 - 滤镜必须配合
position: relative或zoom: 1才生效，漏掉就静默失效，但开发者常误以为“样式没加”，反复重试加重负担
如何快速定位是否真在用 IE 滤镜？
别信 DevTools 的“计算样式”面板——IE 开发者工具对 filter 属性显示极不可靠。直接看真实行为：
- 打开 IE 开发者工具（F12），切到“HTML”选项卡，选中目标元素，右键 → “属性” → 查看
currentStyle.filter值是否非空字符串（如"alpha(opacity=50)"） - 临时删掉所有
filter相关 CSS，刷新；再手动在控制台执行document.body.style.filter = "alpha(opacity=30)"，观察是否立刻变淡——能变就是真在走滤镜管线 - 用
document.querySelectorAll('*').forEach(el => { if (el.currentStyle?.filter) console.log(el, el.currentStyle.filter) })扫描全页，揪出隐藏的滤镜节点
IE 滤镜性能崩塌的典型写法
以下写法在 IE 中极易引发 10fps 以下卡顿，且难以被常规性能分析捕获：
立即学习“前端免费学习笔记（深入）”；
- 给
<ul>列表加filter: progid:DXImageTransform.Microsoft.Blur(pixelRadius=2)，再在其中循环生成 20+<li>—— 每个<li>都被迫参与父级滤镜重绘 - 在
:hover里动态切换filter: alpha(opacity=100)↔alpha(opacity=70)，IE 不缓存中间状态，每次 hover 都重跑整套滤镜流程 - 把
filter和background-image写在同一声明：IE 会丢弃 background 图片，只渲染滤镜，造成背景消失后又突然闪现 - 用
@media screen and (-ms-high-contrast: active)包裹 filter 降级规则——该媒体查询在 IE10+ 才有效，IE9 及以下直接跳过，降级失效
真正有效的排查动作
与其调优滤镜参数，不如砍掉它：
- 确认是否真需要视觉降级：IE 用户占比 filter 降级代码，用纯色/边框替代模糊/阴影效果
- 若必须兼容，改用
background-color+opacity组合模拟半透，比alpha()稳定 3 倍以上；IE8 下opacity不支持，但filter: alpha(opacity=XX)必须写在opacity后面才兜底 - 禁用所有
progid:DXImageTransform.Microsoft.Blur—— 它在 IE9 中已标记为废弃，且无硬件加速路径，实测比同效果的gradient滤镜慢 4× - 检查是否误引入了
CSS-Filters-Polyfill：该脚本在 IE 中会劫持所有filter声明并转译为 SVG，但 IE8 不支持 SVG，最终 fallback 到更慢的 VML，形成双重性能黑洞
最常被忽略的一点：IE 中的“滤镜性能问题”，90% 源于开发者在现代浏览器调试时开了兼容模式，却误以为是真实 IE 行为；真机 IE9 渲染器和 F12 里的“IE9 文档模式”行为并不等价——后者缺省关闭部分滤镜优化开关，而真机默认开启。验证务必用虚拟机或 BrowserStack 实机截图比对。
