element.style.setProperty() 更适合高频动画，因其是原子操作、跳过选择器匹配与层叠计算，CPU占用比class切换低35%以上；但需避免混用getComputedStyle()触发强制同步计算。
element.style.setProperty() 为什么比 class 切换更适合高频动画
在滚动视差、拖拽反馈、Canvas 坐标映射等场景下，每次帧更新都要设一个新值（比如 --offset-x），用 element.classList.add("offset-123") 不现实——你得预生成几百个 class，或动态注入 <style>，后者会触发 CSSOM 重建，开销远大于直接写变量。
而 element.style.setProperty('--offset-x', x + 'px') 是原子操作，只更新该变量在计算样式树中的值，跳过选择器匹配和层叠计算。实测在 120fps 滚动中，连续调用 setProperty() 的 CPU 占用比 class 切换低 35% 以上。
- 仅当变量作用域明确限定在单个元素或其子树时才有效；挂到
document.documentElement会扩散影响范围 - 避免在循环里混用
getComputedStyle(el).getPropertyValue('--x')和setProperty()，前者强制同步样式计算，极易引发 layout thrashing - 若需批量设多个变量（如
--x、--y、--opacity），改用element.setAttribute('style', '--x:1;--y:2;--opacity:0.8;')更少触发重绘
style.transform 直接赋值在动画循环里的致命陷阱
在 requestAnimationFrame 回调中写 el.style.transform = 'translateX(' + x + 'px)' 看似简单，但字符串拼接 + 属性赋值会触发样式重计算 + 布局 + 绘制流水线，尤其当父容器有 will-change: transform 时，还可能额外触发 GPU 上传，反而增加开销。
更糟的是，反复赋值 style.transform 会让浏览器难以合并渲染指令，导致帧时间抖动。Chrome DevTools Performance 面板中常表现为 “Recalculate Style” 时间突增，且紧随一次 Layout。
立即学习“前端免费学习笔记（深入）”；
- 高频动画中优先用
el.style.cssText = 'transform: translateX(123px); transform-origin: 0 0;'，一次性写入，避免多次 style 对象访问 - 绝对不要在 RAF 中读
getComputedStyle(el).transform做插值——它返回矩阵字符串，解析成本高，且强制同步计算 - 移动端 WebView（尤其部分安卓机型）对频繁
style.transform赋值支持不稳定，易闪屏或丢帧
style 属性混用 transform 和 layout 属性时的合成层崩溃
动画元素若同时被 style.width、style.height、style.margin 或 style.display 影响，哪怕只是临时加个 display: none 再切回来，都可能打断其独立合成层。Chrome Layers 面板里会看到该元素从 “Composited layer” 变成 “Shared with ancestor”，意味着所有动画将回退到 CPU 渲染，60fps 直接掉到 40fps 以下。
典型错误组合：el.style.transform = 'scale(1.2)'; el.style.marginTop = '20px'; —— 后者触发布局，强制整个图层重绘，WAAPI 动画也会卡顿。
- WAAPI 动画只推荐操作
transform和opacity；其他属性变更必须确保不触发 layout - 骨架屏切换时别用
el.style.display = 'none'，改用document.documentElement.setAttribute('data-loading', 'true')，靠 CSS 层叠控制显隐 - 检查 Layers 面板时，重点看动画元素是否始终保有 “Composited layer”，一旦变成 “Shared”，就要排查是否有非合成属性被意外修改
SSR 页面中内联 style="--var" 的首次渲染优势与边界
服务端渲染生成的 HTML 若带 <div style="--theme: dark; --scale: 1.2">，客户端首次 paint 完全无需 JS 执行就能生效，省去 DOM 查询、documentElement.style.setProperty() 初始化、事件监听绑定等开销。实测在低端安卓机上，首屏可交互时间快 180ms。
但这只适用于静态变量值。一旦你在 SSR 输出中写了 style="--progress: ${current}%"，CSR 运行时若 current 值不同，就会出现 FOUC 或错帧——因为服务端和客户端变量值不一致。
- SSR 内联变量必须是纯静态、不可变的（如主题、设备类型、环境标识），不能含运行时计算结果
- 内联变量优先级高于
:root声明，但低于!important的普通属性；别指望它能覆盖color: red !important - 老旧 WebView 或 HTML 邮件中，
style="--x"可能被完全忽略，需降级为硬编码内联样式
style 被任何 layout 属性干扰过一次，整条性能曲线就失效了。 
