JavaScript读写分离是避免Layout Thrashing最有效手段，即先集中读取offsetHeight等触发强制同步布局的属性，再集中执行style修改，确保重排最多1次。
JavaScript中读写分离是避免Layout Thrashing（布局抖动）最直接有效的手段。核心在于：**不要在一次循环或连续操作中，交替触发强制同步布局（读）和样式修改（写）**。浏览器会在读取某些布局相关属性时，立即触发重排（reflow），若紧接着又修改样式，就会反复重排重绘，造成性能严重下降。
哪些操作会触发强制同步布局？
以下属性或方法访问时，浏览器必须计算当前精确的几何信息，从而强制同步执行布局：
- offsetTop / offsetLeft / offsetWidth / offsetHeight
- clientTop / clientLeft / clientWidth / clientHeight
- getBoundingClientRect()
- scrollTop / scrollLeft / scrollWidth / scrollHeight
- getComputedStyle(element)（尤其是获取 width、height、left、top 等依赖布局的值）
典型抖动场景与错误写法
常见于动态批量操作元素时，例如调整一组列表项高度后再读取其位置：
// ❌ 抖动：读-写-读-写… 循环中混用
elements.forEach(el => {
el.style.height = '100px'; // 写：标记需重排
console.log(el.offsetHeight); // 读：强制同步布局 → 触发重排
el.style.top = el.offsetTop + 'px'; // 写：再次标记 → 下次读又重排
});
这段代码对每个元素都触发一次重排，N个元素就重排N次，效率极低。
Javascript Sdk
下载
用于 inference.sh 的 JavaScript/TypeScript SDK，可运行 AI 应用、构建代理、集成 150+ 模型。包名：@inferencesh/sdk（npm install），完整 TypeScript 支持。
立即学习“Java免费学习笔记（深入）”；
正确做法：读写分离 + 批处理
将所有“读”操作集中前置，所有“写”操作集中后置，确保浏览器最多只重排1次（甚至0次，取决于是否真有样式变更）：
// ✅ 正确：先读，再写
const heights = [];
const offsets = [];
// ? 第一步：全部读取（触发1次重排，或由浏览器优化合并）
elements.forEach(el => {
heights.push(el.offsetHeight);
offsets.push(el.offsetTop);
});
// ? 第二步：全部写入（不触发同步布局，仅标记 dirty）
elements.forEach((el, i) => {
el.style.height = '100px';
el.style.top = (offsets[i] + 10) + 'px';
});
进阶技巧：使用 requestAnimationFrame 或 CSS 脱离文档流
对于更复杂的动画或高频更新场景，可进一步优化：
- 用 requestAnimationFrame 将读写操作对齐到下一帧开始，让浏览器有机会合并渲染工作
- 对频繁变动的元素，考虑添加 transform: translateZ(0) 或 will-change: transform，使其进入合成层，避免影响主线程布局
- 用 DocumentFragment 批量构建 DOM 后一次性挂载，减少回流次数
