javascript如何优化性能_减少重绘和回流的方法有哪些？

JavaScript性能优化关键在于减少回流与重绘：需批量读写分离、避免强制同步布局、减少DOM操作频次；推荐用getBoundingClientRect()一次性读取、class切换或cssText批量改样式、DocumentFragment离线操作、display隐藏、transform动画及requestAnimationFrame节流。

JavaScript 优化性能的关键之一，是减少浏览器的重绘（repaint）和回流（reflow）。回流会触发整个渲染树的重新计算，代价远高于重绘；而频繁的回流重绘会导致页面卡顿、响应变慢。核心思路是：批量读写分离、避免强制同步布局、减少 DOM 操作频次与范围。

避免在循环中反复读写 DOM 样式

当 JavaScript 读取某些几何属性（如 offsetTop、clientWidth、getComputedStyle()）后又立即修改样式，浏览器会强制同步执行回流来返回准确值——这极易引发“布局抖动”（layout thrashing）。

• ✅ 正确做法：先集中读取所有需要的布局信息，再统一修改样式
• ❌ 错误示例：for 循环里每次读 offsetLeft 再改 left，会触发多次回流
• 可借助 getBoundingClientRect() 一次性获取多个位置尺寸信息

使用 CSS 批量变更代替逐个修改样式

直接操作 element.style.xxx 属于内联样式，每改一次都可能触发渲染更新；而通过切换 class 或修改 cssText 可合并样式变更。

• ✅ 推荐用 element.className = 'new-class' 或 element.classList.add('active')
• ✅ 若需动态生成样式，优先用 element.style.cssText = 'width:100px;height:50px;'（注意会覆盖原有内联样式）
• ⚠️ 避免链式赋值如 el.style.width = '100px'; el.style.height = '50px'; —— 浏览器可能在两次之间做优化，但不可靠

离线操作 DOM：文档片段与隐藏元素

对多个子节点的增删改，应避免直接操作真实 DOM，而是先在内存中构建好结构，再一次性挂载。

• ✅ 使用 document.createDocumentFragment() 收集节点，最后 parent.appendChild(frag)
• ✅ 对复杂 UI 更新，可先 el.style.display = 'none'，操作完再显示（隐藏时不会触发回流）
• ✅ 利用 position: absolute 或 transform 脱离文档流的元素，其动画通常只触发重绘甚至 GPU 加速，不引发回流

善用 requestAnimationFrame 控制更新节奏

需要响应滚动、鼠标移动等高频事件时，不要在事件回调中直接操作样式，否则极易超频触发回流。

• ✅ 使用 requestAnimationFrame(fn) 将 DOM 更新延迟到下一次绘制周期前执行，自然节流
• ✅ 结合防抖/节流控制读取频率，例如监听 scroll 时只在 rAF 回调中读取 scrollTop 并批量更新视图
• ✅ 框架如 Vue/React 的响应式更新也内置了类似的异步批处理机制，合理使用能规避手动踩坑