style.setproperty()不触发重排，因其仅更新计算样式树中的键值对，跳过选择器匹配、cssom重解析与布局计算，待scroll/resize或getcomputedstyle时才惰性求值；而直接改element.style.xxx会立即标记样式变更并可能强制同步重排。
直接改 element.style 触发重排重绘的开销，远大于只改 CSS 变量。关键不在“变量”本身，而在浏览器如何响应这次修改。
为什么 style.setProperty('--x', 'val') 不触发重排
CSS 变量本质是自定义属性，setProperty() 只更新计算样式树中该键值对，不立即走样式计算流程。浏览器跳过选择器匹配、CSSOM 重解析、布局计算（reflow）这些重活，等真正需要渲染时（比如 scroll、resize 或后续读取 getComputedStyle）才按需展开 var(--x) 并参与计算。
- 对比
element.style.backgroundColor = '#ff0'：这会立刻标记样式已变，若紧跟着读取offsetWidth，就会强制同步重排 -
setProperty()是惰性求值，适合批量修改后统一触发一次重排 - 变量值变更本身不改变元素几何或流式布局，所以 layout 阶段完全绕过
为什么频繁设 style.color 比设 --color 更慢
每次写 element.style.color 都会触发内联样式字符串的重新解析 + 与 CSSOM 合并计算；而 setProperty('--color', ...) 只是更新一个键值对，样式计算阶段再统一 resolve。
- 连续执行
el.style.margin = '12px'; el.style.padding = '8px'; el.style.color = '#333'→ 三次独立解析 + 合并 - 换成
el.style.setProperty('--gap', '12px'); el.style.setProperty('--pad', '8px')→ 两次键值更新，无解析开销 - 内联样式优先级最高，容易意外覆盖媒体查询或伪类；变量则完全受层叠规则约束，更可控
document.documentElement.style.setProperty() 不一定比局部 element.style.setProperty() 更好
全局挂载看似“省事”，但实际会让所有依赖该变量的元素都重新计算样式，开销反而更大。
- 如果变量只在某个卡片组件内生效（如
.card { --shadow: 0 2px 4px; }），应直接操作cardEl.style.setProperty('--shadow', ...) - 仅当变量定义在
:root且需全站响应（如主题色、字体缩放）时，才用document.documentElement.style - 批量设多个变量时，
element.setAttribute('style', '')一次性写入比连续setProperty()更少触发重绘，但会清空已有内联样式，慎用
真正容易被忽略的是：CSS 变量的性能优势只在「高频动态更新」场景下才明显；如果只是初始化设一次，差异几乎为零。另外，transition: --x .3s 无效，要过渡变量效果，得靠它所作用的属性（如 background-color: var(--x)）或配合 @property 注册（目前仅 Chromium 支持）。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
