css变量主题切换性能更好，因其仅更新计算样式树键值对、不触发同步重排，且var()惰性求值；而直接赋值style.color会强制重排，dataset.theme批量切换更稳定，且transition必须作用于原生可动画属性而非自定义变量。
CSS变量做主题切换性能更好，是因为它只更新计算样式树中的键值对，不触发同步重排，浏览器等到真正需要渲染时才惰性求值。
为什么 style.setProperty('--color', 'red') 不会强制重排
调用 setProperty() 仅修改自定义属性的字符串值，不走完整的样式计算流程：跳过选择器匹配、CSSOM 重解析、布局计算（reflow）。浏览器把 var(--color) 的展开延迟到 scroll、resize 或调用 getComputedStyle() 等实际需要时才执行。而 element.style.color = 'red' 会立刻标记样式变更，并可能在下一行读取 offsetWidth 时强制同步重排。
批量改主题时，dataset.theme 比连续 setProperty() 更稳
直接操作 document.documentElement.dataset.theme = 'dark' 触发的是 CSS 选择器重新匹配 + 变量重继承，所有依赖 var(--*) 的元素统一在下一帧重绘；而逐个调用 setProperty() 在全局作用域下，会让每个变量更新都单独走一次计算样式树更新路径，开销叠加。更重要的是：dataset.theme 能被 CSS 原生捕获，无需 JS 维护变量映射表，也不怕漏设某个变量导致回退为 transparent 或继承值。
transition 写在 background-color 上才有效，不是写在 --bg 上
这是最容易忽略的性能陷阱：浏览器完全忽略 transition: --bg 0.3s，连警告都不抛。真正生效的方式是把变量用在支持插值的原生属性上，再对那个属性加过渡：
/* ✅ 正确：变量用于可过渡属性，且 transition 作用于该属性 */<br>.card {<br> background-color: var(--bg);<br> transition: background-color 0.3s ease;<br>}<br><br>/* ❌ 错误：transition 目标不是浏览器可动画的属性 */<br>.card {<br> --bg: #fff;<br> transition: --bg 0.3s; /* 这行被静默丢弃 */<br>}
如果变量控制多个属性（比如颜色、阴影、边框），得分别给每个目标属性加 transition，不能靠一个变量“带动”整套动画。
真正影响性能的从来不是“用了变量”，而是你是否让变量更新落在浏览器的惰性求值路径上——只要一写 element.style.xxx 或漏掉 :root 定义、或把 transition 放错位置，就等于主动放弃这个优势。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
