element.style.setproperty()比document.documentelement.style.setproperty()更快，因其作用域更窄，仅触发当前元素及其引用该变量的子树样式重算，避免全页面强制重计算。
直接用 element.style.setProperty() 设置 CSS 变量，能绕过 CSSOM 重解析和选择器匹配，只更新计算样式树中该变量值——这是规避重排、提升高频更新场景性能的核心路径。
为什么 element.style.setProperty() 比 document.documentElement.style.setProperty() 更快
不是“全局就一定好”，而是作用域越窄，影响范围越小。浏览器对 CSS 变量的响应式计算是继承驱动的：改 document.documentElement 上的变量，所有用到它的后代元素都要重新走一遍样式计算；而改单个元素的 style.setProperty()，只触发该元素及其子树（且仅当子元素实际引用该变量时）的局部 recalc。
- 若变量只用于某个卡片的阴影：
.card { --shadow: 0 2px 4px; }，就该直接操作cardEl.style.setProperty('--shadow', '0 4px 8px') - 误挂到
document.documentElement会导致整个页面里所有var(--shadow)都被强制重算，哪怕它们根本不在视口内 - SSR 页面中预设
style="--shadow: 0 2px 4px"的 HTML 元素，首次渲染连 JS 都不用执行，开销最低
style.setProperty() 和 style.cssText 在变量设置中的关键区别
setProperty() 是原子更新，cssText 是全量覆盖——这对维护已有内联样式至关重要。
-
el.style.transform = 'scale(1.2)'; el.style.setProperty('--opacity', '0.8');→ 两者共存 -
el.style.cssText = '--opacity: 0.8';→transform被清空，视觉跳变 - 连续调用多次
setProperty()，浏览器通常合并为一次样式更新；cssText每次赋值都算独立变更，可能触发多余重绘 - 批量设多个变量时，才考虑
el.setAttribute('style', '--x:1;--y:2;--z:3;')，它比连续setProperty()更少触发重绘
嵌套循环中读写 CSS 变量的隐性性能陷阱
变量本身不重排，但循环里裸用 getComputedStyle().getPropertyValue() + setProperty() 组合，极易引发 layout thrashing。
- 每次
getComputedStyle(el).getPropertyValue('--size')都可能强制同步样式计算，尤其在深层 DOM 中成本陡增 - 把读取提到循环外：
const rootStyle = getComputedStyle(document.documentElement);，再在循环里复用rootStyle.getPropertyValue('--step') - 避免在
for中连续设el.style.setProperty('--left', i + 'px')并绑定left属性——left触发布局，transform才是安全替代 - 用
contain: style隔离变量作用域，让子树样式计算独立，父级变量变动不扩散
动画与过渡中 CSS 变量的真实生效条件
CSS 变量不能直接过渡，必须靠它驱动的可动画属性（如 transform、opacity）来承载动画效果。
-
transition: --color 0.3s无效；但transition: background-color 0.3s+background-color: var(--color)就有效 - 改变量后动画不重播？因为浏览器不监听变量变更。手动重播需先清空再恢复：
el.style.animation = 'none'; setTimeout(() => el.style.animation = 'slide-in 0.4s', 10) - IE 完全不支持 CSS 变量，
@supports (--foo: 0)必须包裹变量相关逻辑，否则降级失效 -
@property注册后才能真正过渡变量（Chrome 110+），但目前覆盖率有限，生产环境慎用
真正卡顿的从来不是变量本身，而是它背后绑定的布局属性——--margin 比 --transform 危险十倍；变量只是开关，属性才是引擎。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
