修改CSS变量本身不触发重绘或重排；仅更新计算样式树键值对，是否重绘取决于变量是否被var()实际引用并参与渲染帧计算，用于布局属性则会意外触发重排。
修改CSS变量本身不触发重绘或重排
直接调用 element.style.setProperty('--color', '#f00') 不会立即导致重绘，浏览器只更新计算样式树中对应键值对，跳过选择器匹配、CSSOM重解析和 layout 计算。是否重绘，取决于该变量是否被 var(--color) 实际引用，且是否参与了当前帧的渲染计算。
真正触发全页面重渲染的是“大面积继承 + 高频引用”
当一个全局变量（如 :root { --theme-color: #3b82f6; }）被数百个元素通过 color: var(--theme-color)、border-color: var(--theme-color)、box-shadow: 0 0 4px var(--theme-color) 等方式复用时，JS 每次修改该变量，浏览器必须为所有依赖节点重新执行样式计算（Recalculate Style），并判定是否需要 layout 或 paint。
- Chrome DevTools 的 Performance 面板中若出现大量
Recalculate Style节点（>1000）、耗时 >5ms，基本可确认是此问题 - Elements 面板中任一使用该变量的元素，Computed 标签页下 “Used by” 列显示几十甚至上百条匹配，就是危险信号
- 变量同时用于多个属性（颜色 + 边框 + 阴影）会放大影响范围，比单属性引用更易抖动
容易被忽略的隐式重排场景
你以为只改颜色，其实悄悄触发了 layout：
-
width: var(--editor-width)—— 变量值变，等于 width 变，强制重排 -
font-size: var(--text-scale)—— 字号变化引发行高、容器高度连锁反应 - 单位缺失：传
setProperty('--gap', 12)而非'12px'，CSS 解析失败 fallback 到初始值，造成尺寸塌陷 - 在
scroll回调里直接调用setProperty，且变量用于非合成属性 → 浏览器来不及合并，每帧都强制重排
节流比“写得更漂亮”更有效
多数抖动问题根源不在语法，而在更新节奏失控：
立即学习“前端免费学习笔记（深入）”；
- 用
requestIdleCallback或throttle包裹变量更新，限制为每秒最多 1–2 次 - 避免在
resize/scroll中直接设值；改用IntersectionObserver或getBoundingClientRect批量判断后统一更新 - 把高频动画变量（如
--anim-opacity）和低频主题变量（如--theme-color）彻底拆开，作用域隔离 - 组件内定义变量时加命名空间前缀：
.card { --card-primary: #1a1a1a; }，而非依赖全局--primary
真正难处理的不是怎么设变量，而是谁在读它、在哪算它、何时画它——链路断一环，性能就掉一截。
