CSS变量本身不阻塞渲染，但高频动态更新、深度嵌套继承或在动画/媒体查询中滥用会显著拖慢样式计算与重绘，尤其当每帧JS写入或链式继承达5层时；应通过Chrome Performance面板检测Recalculate Style耗时是否超15ms并对比硬编码基准。
CSS变量本身不阻塞渲染，但滥用或误用会拖慢首屏样式计算和重绘，尤其在大量动态更新或嵌套计算时。
什么时候CSS变量会变慢
CSS变量（--foo）是运行时解析的，浏览器必须在每次计算依赖值（如 calc(var(--gap) * 2)）时查找、继承、回退，这发生在样式计算阶段。如果变量被高频读写（比如滚动监听里反复改 document.documentElement.style.setProperty('--scroll-y', y)），或在大量元素上通过 :root + var() 链式继承（如 5 层嵌套组件都靠同一个变量控制边距），就会放大开销。
- 变量定义在
:root但只被 1–2 个选择器用，影响微乎其微 - 变量用于
@media或@supports内部条件计算，会触发额外样式重算 - 用变量驱动
transform或opacity动画但未加will-change，可能意外触发层合成卡顿
怎么测它到底慢不慢
别只看文件大小或 Lighthouse 的“未使用 CSS”建议——那些对变量无效。打开 Chrome DevTools → Rendering 面板勾选 Paint flashing 和 Layout Shift Regions，再手动滚动/切换主题，观察是否出现异常高亮；更关键的是切到 Performance 面板录制首屏加载，过滤出 Style & Layout 阶段：
- 看
Recalculate Style时间是否明显长于同类项目（>15ms 要警惕） - 展开该事件，检查
Computed Styles子项里是否有大量var(--x)解析条目 - 对比关闭变量（硬编码值）后的录制数据，差异 >5ms 就值得优化
哪些写法最容易踩坑
变量不是万能胶，有些用法看似优雅，实则埋雷：
立即学习“前端免费学习笔记（深入）”；
- 在关键路径动画中用
var(--speed)控制transition-duration：每次修改都会强制重算整个 CSSOM，改用 CSS 自定义属性 +transition分离更稳 - 把响应式断点全写成
var(--sm)/var(--md)并在每个媒体查询里重新赋值：浏览器要为每个断点重建继承链，不如直接用@media (min-width: 480px) - 用
var(--color)配合filter: brightness()做主题切换：亮度计算是 GPU 密集型，叠加变量解析易造成掉帧
真正影响首屏的从来不是变量声明本身，而是它被读取的上下文和频率。一个 var(--primary) 在 :root 里声明一次，被 20 个静态类引用，几乎无成本；同一变量被 JavaScript 每帧写入 60 次，就立刻变成性能热点。盯住 DevTools 里的实际调用栈，比纠结“该不该用变量”有用得多。
