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