CSS变量卡顿主因是消费路径不当：绑定布局属性（如width/left）、深层嵌套回溯、高频事件中裸调setProperty或紧接getComputedStyle触发强制重排，而非变量数量多。
不会单纯因为“数量多”就拖慢渲染，但变量的使用方式、消费路径和更新节奏会叠加出明显卡顿——尤其当它们被大量用于布局属性、深层嵌套结构或高频事件中时。
getComputedStyle 读取深层变量时耗时翻倍
浏览器查找 var(--x) 必须沿祖先链逐层回溯。DOM 深度 ≥6 层时，getComputedStyle(el).getPropertyValue('--x') 耗时通常翻倍；深度达 12 层，低端机单次调用可能卡住主线程超 80ms。
- 别把所有变量都挂到
:root，尤其只在局部组件（如.card）里用的，直接写.card { --shadow: 0 2px 4px; } - 用 Chrome DevTools 右键元素 → “Show DOM properties” 查
node.depth，≥6 就该警惕 - 控制台粘贴脚本快速扫描：
(function walk(node, level = 0) { if(level >= 6) console.log(`深度 ${level}:`, node); for(let child of node.children) walk(child, level + 1); })(document.body);
calc(var()) 失去静态优化，每次重绘都重新算
calc(16px + 8px) 可被浏览器提前折叠，但 calc(var(--spacing) * 2) 必须保留运行时解析逻辑：每次重绘都要查找变量 → 推导单位 → 执行运算，无法缓存，也无法合并。
- 高频动画或滚动中避免
width: calc(var(--size) * 1.2)这类写法 - 若变量值稳定（如主题缩放系数），改用 JS 预计算后直接赋值：
el.style.width = (base * scale) + 'px'; - 必须用 CSS 变量驱动动画时，优先绑定到
transform或opacity，避开布局属性
批量 setProperty + 紧接 getComputedStyle 触发 layout thrashing
el.style.setProperty('--color', 'red') 本身不触发重排，是惰性更新；但一旦后面立刻跟 getComputedStyle(el).color，浏览器必须同步完成样式计算+布局，变成强制回流。
立即学习“前端免费学习笔记（深入）”；
- 错误模式：
for (let el of list) { el.style.setProperty('--size', i + 'px'); const c = getComputedStyle(el).color; }→ 每轮都卡 - 正确做法：先批量设置（可用
el.setAttribute('style', '--x:1;--y:2;')一次性写入），再统一读取；或用requestAnimationFrame节流读取 - 全局改变量？用
document.documentElement.style.setProperty()；局部改？直接操作目标元素的el.style.setProperty()，影响范围更小
真正容易被忽略的是：变量本身不卡，卡的是它被谁消费、在哪条渲染路径上求值。同一个 --theme-color，用在 color 上几乎无感，用在 left 或 width 上就可能每帧重排——问题不在定义了多少个变量，而在你把它塞进了哪条引擎不得不反复跑的路径里。
