requestAnimationFrame实现读写分离可避免强制同步布局，即先在当前帧集中读取布局信息（如offsetHeight），再在下一帧执行样式修改（如style.transform），从而防止浏览器回退layout阶段造成卡顿。
在JavaScript中，利用 requestAnimationFrame 将读写样式分离，核心是把“读取布局信息”（如 offsetHeight、getBoundingClientRect()）和“修改样式”（如设置 style.transform）分在两个连续的帧中执行，从而避免浏览器触发强制同步布局（Forced Synchronous Layout），提升渲染性能。
为什么强制同步布局会影响性能？
当代码中先读取某个元素的几何属性（比如 element.offsetWidth），又紧接着修改其样式（比如 element.style.width = '200px'），浏览器无法复用上一帧的布局缓存，必须立即暂停 JavaScript 执行，回退到渲染管线的 layout 阶段重新计算——这就是强制同步布局。它打断渲染流水线，容易造成卡顿，尤其在动画循环中。
用 requestAnimationFrame 实现读写分离
关键思路：把所有“读操作”集中放在当前帧的末尾（即 requestAnimationFrame(() => { /* 读 */ })），把所有“写操作”推迟到下一帧开始（即 requestAnimationFrame(() => { /* 写 */ })）。这样读和写不在同一帧内，浏览器能批量处理样式变更，跳过不必要的 layout。
- 第一帧（读帧）：只做测量，不改样式 —— 获取
clientWidth、getComputedStyle、scrollLeft等 - 第二帧（写帧）：只做变更，不读布局 —— 设置
style.transform、style.opacity、classList.toggle等
一个典型滚动动画示例
比如实现一个根据滚动位置更新元素透明度和位移的效果：
立即学习“Java免费学习笔记（深入）”；
// ❌ 错误：读写混在同一帧，触发强制 layout
function badScrollHandler() {
const top = window.scrollY;
const el = document.getElementById('box');
const height = el.offsetHeight; // ← 读操作
el.style.transform = `translateY(${top * 0.5}px)`; // ← 写操作（紧随读，强制 layout）
}
<p>// ✅ 正确：读写分离
let scrollData = null;</p><p>function readScroll() {
scrollData = { y: window.scrollY };
requestAnimationFrame(writeStyles); // 延迟到下一帧写
}</p><p>function writeStyles() {
if (!scrollData) return;
const el = document.getElementById('box');
// 不在此处读 offsetHeight！只写
el.style.transform = <code>translateY(${scrollData.y * 0.5}px)</code>;
el.style.opacity = Math.max(0.2, 1 - scrollData.y / 500);
}</p><p>window.addEventListener('scroll', readScroll, { passive: true });
更健壮的封装模式：batched rAF
实际项目中可封装一个简单的批处理机制，自动聚合读/写任务：
- 维护两个队列：
readTasks和writeTasks - 调用
rafRead(fn)时，将 fn 推入readTasks，并在当前帧末尾统一执行 - 调用
rafWrite(fn)时，将 fn 推入writeTasks，并在下一帧执行 - 确保读完立刻 schedule 写，且写不触发新读
这样既能解耦逻辑，又能防止开发者无意中在写阶段又读取布局。
