css变量更新本身不直接重绘或重排，但当根级变量被大量元素多属性复用（如color、border-color、box-shadow）或用于布局属性（如width、font-size）时，会触发全量样式重计算与重排/重绘连锁反应，导致性能抖动。
修改 CSS 变量本身不直接重绘，但一旦它被大量元素通过 var(--x) 复用，且用于影响布局或绘制的属性（如 width、background-color），浏览器就必须为所有依赖节点重新走完整样式计算 + 布局判定流程——这才是卡顿的根源。
为什么 setProperty('--color', '#f00') 会触发整屏重绘
不是变量“有毒”，而是它的使用方式放大了副作用：
- 根级变量（如
:root { --color: red; }）被 200 个元素的color、border-color、box-shadow同时引用 → 每次更新都会让这 200 个元素的计算样式全部失效 - 浏览器无法只重算颜色；只要变量参与了任意一个影响布局的属性（哪怕只在一个元素上写了
width: calc(100px + var(--gap))），整个子树就得重走 Layout 流程 -
getComputedStyle(el).getPropertyValue('--color')这类读取操作在循环中调用，会强制同步触发样式刷新，把本可合并的更新拆成多次
哪些 CSS 变量更新一定会抖
关键看变量是否“跨层污染”和“多属性复用”：
- 用在
width/height/top/left等布局属性上 → 必然重排，抖得最狠 - 同时被
background和box-shadow引用 → Paint 开销翻倍，尤其在高 DPI 屏幕上 - 定义在
:root却只被.modal内部使用 → 作用域过大，无效计算太多 - 在
scroll回调里每帧调用setProperty→ 频率远超渲染帧率，浏览器只能丢帧
怎么验证是不是变量在抖，而不是其他原因
别靠感觉，用 Chrome DevTools 实锤：
- 打开 Performance 面板，录制一次变量更新操作，重点看
Recalculate Style耗时是否 > 5ms 且节点数 > 1000 - 在 Elements 面板选一个用了该变量的元素，展开
Computed→ 搜索变量名，看Used by列是否列出几十甚至上百个匹配项 - 勾选 Rendering → Paint Flashing，快速切换变量值，观察高亮区域是否覆盖整屏或大片无关区域
真正容易被忽略的点
变量本身不抖，抖的是浏览器对“样式依赖图”的重建逻辑。哪怕你只改了一个 --accent，只要它被 h1、button、.card::before、[data-theme] 四处引用，且其中一处连着 transform、另一处连着 font-size，浏览器就得为全部节点重跑样式引擎——这个开销跟 JS 执行无关，也绕不过去。优化方向从来不是“怎么写变量”，而是“谁该用、在哪用、多久用一次”。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
