JavaScript性能优化需减少重绘与回流，核心是读写分离、批量操作DOM、善用transform/opacity和合成层，配合防抖节流及IntersectionObserver等原生API。
JavaScript 性能优化中，减少重绘（repaint）和回流（reflow）是提升页面响应速度与流畅度的关键。回流会触发整个渲染树的重新计算，重绘则需重画像素，二者都消耗大量资源，尤其在动画或高频交互场景下影响明显。
避免强制同步布局（Forced Synchronous Layout）
当 JavaScript 读取某些布局属性（如 offsetTop、clientWidth、getComputedStyle()）后，又立即修改样式，浏览器不得不提前执行回流来返回准确值——这就是强制同步布局，极易造成性能瓶颈。
- 把所有读取操作集中在一起，所有写入操作集中在一起（读-写分离）
- 避免在循环中反复读写 DOM 布局信息，可先缓存值再批量处理
- 用
requestAnimationFrame()包裹读写操作，让浏览器有机会合并渲染任务
批量修改 DOM，减少触发次数
每次直接操作元素样式或结构，都可能触发回流/重绘。频繁操作等于反复“打扰”渲染引擎。
- 用
documentFragment批量插入多个节点，只触发一次回流 - 修改 class 替代逐个设置 style 属性（CSS 更高效，且便于复用和维护）
- 对动画元素使用
transform和opacity，它们不触发回流，还能启用 GPU 加速
合理使用 CSS 合成层（Compositing Layers）
将需要频繁变化的元素提升为独立合成层，可让其脱离普通文档流，变化时仅重绘该层，不波及周围内容。
立即学习“Java免费学习笔记（深入）”；
- 用
will-change: transform提前告知浏览器该元素将变化（慎用，避免滥用导致内存浪费） - 或通过
transform: translateZ(0)/translate3d(0,0,0)触发硬件加速（兼容性好，但现代推荐will-change+transform组合） - 注意：过多合成层会增加内存开销和管理成本，应结合 DevTools 的 Layers 面板观察实际效果
监听与事件处理中的防抖与节流
像 scroll、resize 这类高频事件，若直接绑定重排重绘逻辑，极易引发连续回流，卡顿明显。
- 对非即时依赖的场景（如滚动懒加载），用
debounce延迟执行 - 对必须响应但无需每次都执行的场景（如滚动位置上报），用
throttle控制频率 - 优先使用
IntersectionObserver替代 scroll 监听做可视区判断，它由浏览器原生优化，不触发回流
不复杂但容易忽略：很多性能问题不在代码多炫酷，而在 DOM 读写节奏是否尊重浏览器渲染机制。保持“少读、批写、避布局、善分层”，体验提升立竿见影。
