“读写分离”在CSS变量场景下指单次JS执行中集中读取（如getComputedStyle）再集中写入（setProperty），以避免强制同步布局；高危读取包括offsetHeight、getBoundingClientRect等，安全属性限于transform、opacity等不触发布局的样式。
什么是“读写分离”在 CSS 变量场景下的真实含义
它不是指数据库那种读库写库分离，而是指：**在单次 JS 执行周期中，把所有对 CSS 变量的读取（getComputedStyle、getPropertyValue）集中放在前面，所有写入（setProperty）集中放在后面**。这样能避免浏览器反复触发强制同步布局（Forced Synchronous Layout）。
很多人误以为“只要没读 offsetWidth 就不会抖”，但其实只要你在写入变量后、又立刻读取依赖该变量的布局信息（比如 getComputedStyle(el).height），而该变量已影响了元素尺寸或位置，就仍可能触发重排。
哪些 CSS 变量读取操作会隐式触发布局抖动
不是所有变量读取都危险，但以下情况会——尤其当变量被用于计算几何属性时：
-
getComputedStyle(el).getPropertyValue('--font-scale')本身安全；但若你紧接着用它算el.offsetHeight * scale，而该 scale 正在控制transform: scale(var(--font-scale))，那offsetHeight就会强制同步布局 -
getComputedStyle(el).width或getBoundingClientRect()—— 这些是“高危读取”，无论变量是否参与，只要 DOM 已被标记为需重排，它们就会拉出一次完整 layout - 读取
getComputedStyle(el).getPropertyValue('--bg-color')安全，因为颜色不触发 layout；但读取getPropertyValue('--item-height')后立即用于设置el.style.height，若该变量本就定义在height上，就构成“读-写”交替
正确做法：批量读 + 批量写 + 避免中间穿插
以动态更新一组卡片的缩放和背景色为例：
立即学习“前端免费学习笔记（深入）”；
// ❌ 错误：读-写-读-写，每轮都可能触发 layout
cards.forEach(card => {
const curScale = parseFloat(getComputedStyle(card).getPropertyValue('--scale')) || 1;
card.style.setProperty('--scale', (curScale * 1.1).toString()); // 写
const newHeight = card.offsetHeight; // 读 → 强制 layout！
card.style.setProperty('--height', `${newHeight}px`); // 再写
});✅ 正确写法：
// ✅ 先统一读取所有当前值
const reads = cards.map(card => ({
scale: parseFloat(getComputedStyle(card).getPropertyValue('--scale')) || 1,
height: card.offsetHeight // ⚠️ 这里仍是读，但只做一次，且集中
}));
<p>// ✅ 再统一写入所有新值（不依赖上一步的写结果）
cards.forEach((card, i) => {
card.style.setProperty('--scale', (reads[i].scale <em> 1.1).toString());
card.style.setProperty('--height', `${reads[i].height </em> 1.1}px`);
});关键点：
- 所有
offsetHeight、getBoundingClientRect()等高危读取必须在任何setProperty之前完成 - 如果变量之间有依赖（如
--height由--scale推导），应纯数学推导，而非靠读取 DOM 后再计算 - 避免在循环内调用
getComputedStyle多次——它本身开销不小，可缓存一次结果复用
更彻底的规避：用 CSS 自定义属性 + 不触发 layout 的属性组合
真正想零抖动，就得让变量只作用于不触发布局的属性上：
- 安全组合：变量驱动
transform、opacity、filter、background-color—— 这些走合成层，不进 layout 流程 - 危险组合：变量直接绑定到
width、height、margin、top（非 transform）、grid-template-columns—— 修改即重排 - 折中方案：用
transform: scale(var(--scale))替代width: calc(100px * var(--scale))；用transform: translateX(var(--offset))替代left: var(--offset)
最后提醒一句：即使你严格做了读写分离，如果 CSS 变量最终被用在 height 这类属性上，且你又在 JS 中频繁修改它（比如每帧都改），浏览器仍可能因 layout 频率过高而卡顿。这时候，与其优化读写顺序，不如重构样式逻辑，把 layout 敏感操作交给 CSS 动画或 will-change 提前声明。
