关键在于读写分离、批量处理与时机可控：将尺寸读取集中于帧开头，样式写入集中于帧末尾，借助rAF调度，辅以ResizeObserver、FLIP等现代API规避同步布局。

关键不是“少操作”，而是“读写分离 + 批量处理 + 时机可控”。布局抖动本质是浏览器在单帧内被 JS 反复打断、强制同步计算布局，只要把读和写错开、集中执行，并交给浏览器统一调度，就能基本避免。

把所有尺寸读取集中到一帧开头

任何访问 offsetHeight、getBoundingClientRect()、clientWidth、scrollLeft 等属性的操作，都会触发同步布局。不要在循环里挨个读，也不要读完立刻改样式。

• 用 getBoundingClientRect() 一次性拿到 top、left、width、height 等多个值，别分开调用多次
• 批量处理多个元素时，先遍历一遍，把所有需要的尺寸存进数组或对象，再统一进入写阶段
• 滚动或 resize 中需查位置时，只读一次，缓存结果供后续逻辑使用

把所有样式写入集中到一帧末尾

修改 style.width、className、style.left 等触发布局的属性，会标记元素为 dirty，但真正重排发生在浏览器 flush 阶段。频繁写 = 频繁排队重排。

jm-jsjkxyjs02-zlm-405

使用约定式提交（Conventional Commits）生成标准化的 Git 提交信息。适用于以下场景： (1) 暂存更改时需要提交信息； (2) 审查 diff 时希望获得结构化摘要； (3) 编写 PR 描述或变更日志（changelog）条目； (4) 用户明确要求“为本次更改编写提交信息”。 该功能会分析已暂存/未暂存的 diff，并生成按类型（type）划分范围的提交信息。

下载

• 用 element.style.cssText = "transform: translateX(10px); opacity: 0.8;" 代替多行 style 赋值
• 优先用 transform 和 opacity 动画，它们不触发重排，只走合成层
• 要改多个元素样式，先用 DocumentFragment 构建离线结构，最后一次性 append 到 DOM

用 requestAnimationFrame 控制执行节奏

rAF 不是万能解药，关键是它提供的“帧内执行窗口”——浏览器保证在下一帧绘制前统一 flush 所有样式变更。

• 把读操作放在 rAF 回调开头，写操作放在同一回调末尾，中间不穿插其他 layout 触发行为
• 不要在 rAF 里又读又写又读又写，那只是把抖动从主线程挪到了 rAF 帧里
• 对滚动驱动动画，用 rAF 包裹整个逻辑，且确保内部只读一次、只写一次

用现代 API 替代手动轮询

有些场景根本不需要 JS 主动读尺寸，交给浏览器更稳更快。

• 响应式尺寸变化用 ResizeObserver，它的回调中读到的尺寸已是稳定值，不会引发额外 layout
• 图片/视频占位用 aspect-ratio（配合块级容器），从源头避免加载后高度突变
• 动画控制用 FLIP 技术：先记录初始状态（First），应用终态类名（Last），再用 transform 反向补平（Invert），最后播放（Play）——全程避开 layout 读写