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 加速，不引发回流
档流的元素，其动画通常只触发重绘甚至 GPU 加速，不引发回流善用 requestAnimationFrame 控制更新节奏
需要响应滚动、鼠标移动等高频事件时，不要在事件回调中直接操作样式，否则极易超频触发回流。
- ✅ 使用
requestAnimationFrame(fn)将 DOM 更新延迟到下一次绘制周期前执行，自然节流 - ✅ 结合防抖/节流控制读取频率，例如监听 scroll 时只在 rAF 回调中读取 scrollTop 并批量更新视图
- ✅ 框架如 Vue/React 的响应式更新也内置了类似的异步批处理机制，合理使用能规避手动踩坑
