修改CSS变量本身不慢，但会触发全量样式重计算；因浏览器需遍历所有依赖节点重新执行样式计算、布局判定及重绘，导致整屏闪烁。
频繁用 setProperty 修改 CSS 变量本身不慢，但会触发全量样式重计算——卡顿不是变量的问题，是浏览器被迫为所有依赖节点重新走一遍样式 + 布局判定流程。
为什么改一个 --color 会让整屏闪一下
当 :root 上定义的变量被大量元素通过 color: var(--color)、border-color: var(--color)、box-shadow: 0 0 4px var(--color) 复用时，修改它等于向整个渲染树广播“失效信号”。浏览器无法只更新颜色，必须：
- 遍历所有已计算样式的 DOM 节点，检查是否用到了该变量
- 对每个命中节点，重新执行完整样式计算（包括继承链回溯）
- 若变量参与了
calc(var(--x) * 2)或影响尺寸/位置，还会触发 Layout 判定 - 最终批量重绘，高亮区域常覆盖整屏（可用 Chrome Rendering 面板验证）
getComputedStyle 在深层 DOM 中读取变量会雪上加霜
在嵌套 ≥6 层的元素上调用 getComputedStyle(el).getPropertyValue('--x')，浏览器要沿祖先链逐层查找定义，耗时翻倍；深度达 12 层时，低端机单次调用可能卡住主线程超 80ms。
Json Schema Toolkit
下载
使用 JSON Schema 验证 JSON 数据，从示例 JSON 生成 schema，并将其转换为 TypeScript 接口、Python 数据类或 Markdown 文档。
- 典型陷阱：
for (let el of list) { el.style.setProperty('--size', i + 'px'); const c = getComputedStyle(el).color; }→ 每轮都强制同步计算 - 正确做法：先批量设变量，再统一读取
el.style.cssText或用requestAnimationFrame节流读取 - 更优解：把变量定义移到更靠近目标元素的祖先上（如
.card { --color: #333; }），而非全挂:root
高频动画或滚动中用 calc(var()) 实际是在拖慢自己
calc(var(--spacing) * 2) 无法被浏览器静态折叠，每次重绘都需运行时解析 + 查找 + 运算，比纯数字 calc(16px + 8px) 多出约 12–18ms 连锁开销。
立即学习“前端免费学习笔记（深入）”；
- 问题放大场景：滚动监听里每帧都改
--scroll-y，又在多个transform: translateY(calc(var(--scroll-y) * 0.5))中使用 - 替代方案：JS 预算好值后直接写
el.style.transform = 'translateY(42px)'，或用transform+will-change升层 - 真正容易被忽略的是：变量本身不抖，抖的是浏览器对“大面积失效”的响应逻辑——它没得选，只能重算
最有效的优化往往不是换写法，而是砍掉不必要的更新：用 requestIdleCallback 或节流控制每秒最多更新 1–2 次，比任何 CSS 技巧都管用。
