CSS变量可解耦filter控制与渲染，需定义带单位的变量（如--blur:2px），用requestAnimationFrame批量更新，按序声明filter组合，并配合will-change和图层提升优化性能。
filter 值不能直接绑定滑块？用 CSS 变量绕过 JS 字符串拼接
原生 filter 属性不支持 CSS 动态计算，style.filter = `blur(${v}px)` 这类字符串拼接虽能用，但难维护、易出错、无法被 CSS 动画或 transition 原生接管。真正解耦控制与渲染的方式是：把滤镜参数抽成 CSS 变量，让 HTML 元素只声明变量，CSS 规则统一计算 filter。
关键点在于：:root 或容器元素定义变量，img 通过 var(--blur) 引用，再在 CSS 中组合成完整 filter 值 —— 浏览器会自动响应变量变更，且兼容 transition 和 will-change。
- HTML 中无需写
style.filter，只加 class 和 data 属性即可 - CSS 变量名必须带单位（如
--blur: 2px），否则blur(var(--blur))会失效 - 多个滤镜叠加时，所有变量需在同一作用域下定义，避免层级覆盖丢失
如何用 JavaScript 安全更新 CSS 变量
别直接改 document.documentElement.style.setProperty('--blur', '3px') 后就完事 —— 多个滑块并发触发时，变量更新可能乱序，导致某次值被覆盖。正确做法是集中管理、批量提交。
- 用
dataset或自定义属性存当前值（如data-blur="3"），再统一读取并 setProperty - 对每个滑块监听
input，但只触发一次requestAnimationFrame批量更新，避免重复计算 - 注意单位转换：brightness/contrast/grayscale 等函数接受无单位数值或百分比，
--brightness: 1.2对应brightness(var(--brightness))，而--brightness: 120%也能用，但混用易错
示例片段：
立即学习“前端免费学习笔记（深入）”；
const updateVars = () => {
document.documentElement.style.setProperty('--blur', `${blurSlider.value}px`);
document.documentElement.style.setProperty('--brightness', blurSlider.valueAsNumber);
document.documentElement.style.setProperty('--grayscale', `${graySlider.value}%`);
};
filter 组合顺序影响最终效果，变量也要按序声明
CSS 滤镜函数执行是严格从左到右的流水线：先 grayscale() 再 hue-rotate()，和反过来结果完全不同。变量本身没顺序，但你在 CSS 里写的 filter 表达式顺序决定了渲染逻辑。
- 不要写
filter: blur(var(--blur)) hue-rotate(var(--hue));然后又在别处写filter: hue-rotate(var(--hue)) blur(var(--blur));—— 同一元素上后者会完全覆盖前者 - 如果需要切换滤镜组合模式（比如“复古”vs“赛博”），建议用不同 class 控制整套
filter声明，而不是动态改单个变量 -
url()滤镜无法用变量传参，它指向外部 SVG 定义，变量只能控制是否启用该 filter（通过filter: var(--custom-filter, none)）
性能卡顿？检查 will-change 和硬件加速是否生效
高频拖动滑块时，即使用了 CSS 变量，filter 仍可能掉帧 —— 尤其是 blur() 值 > 5px 或同时叠加 3 个以上滤镜时。这不是变量的问题，而是浏览器渲染策略。
- 给图片加
will-change: filter，但仅在交互中动态添加，用完移除，避免长期占用 GPU 内存 -
transform: translateZ(0)或backface-visibility: hidden能强制图层提升，对blur类滤镜提升明显 - Chrome DevTools 的 “Rendering” 面板勾选 “Paint flashing”，拖动时若大面积红闪，说明重绘开销过大，得降 blur 值或减少叠加数
最常被忽略的是：CSS 变量 + filter 的组合虽然优雅，但一旦涉及 drop-shadow() 或高值 blur()，它比纯 JS 设置 style.filter 更吃 GPU —— 因为变量更新会触发整个层的重合成，而非局部样式重算。
