JavaScript性能优化关键在于减少重排与重绘：应批量修改样式、避免强制同步布局、优先使用transform/opacity动画、精简DOM结构并合理管理样式作用域。
JavaScript 优化性能的关键之一，是减少浏览器的重绘（repaint）和重排（reflow）。重排会重新计算元素的几何属性（位置、尺寸等），触发整个渲染树的更新；重绘则是在不改变布局的前提下重画像素。重排必然导致重绘，但重绘不一定触发重排。频繁的重排重绘会严重拖慢页面响应速度，尤其在动画或滚动场景中。
批量修改 DOM 样式
直接多次读写同一个元素的样式属性（比如连续设置 el.style.width、el.style.height、el.style.top），会强制浏览器反复计算布局，引发多次重排。应尽量把样式修改合并为一次操作：
- 使用
className或classList切换预定义的 CSS 类，而非逐个设置内联样式 - 用
cssText一次性写入多个样式：el.style.cssText = "width:100px; height:50px; top:20px;" - 对多个元素操作时，先用
documentFragment构建完整节点结构，再一次性挂载到 DOM
避免强制同步布局（Forced Synchronous Layout）
当 JavaScript 在修改样式后立即读取布局相关属性（如 offsetTop、clientWidth、getComputedStyle()），浏览器不得不立刻执行重排来返回准确值——这会打断渲染流水线，造成性能瓶颈。
- 把所有读取操作集中放在修改前，或全部放在修改后（“读-改-读-改”模式要避免）
- 用
requestAnimationFrame()延迟到下一帧再读取，确保避开当前渲染周期的干扰 - 缓存已读取的布局值，避免重复调用
使用 transform 和 opacity 实现高效动画
CSS 的 transform（如 translateX、scale）和 opacity 属于合成属性（compositing properties），浏览器可在独立的合成层（layer）中处理，不触发重排，甚至不触发重绘（只做图层混合）。
立即学习“Java免费学习笔记（深入）”；
- 动画优先用
transform: translate3d(0,0,0)或will-change: transform启用硬件加速（注意不要滥用will-change） - 避免用
top/left动画，它们会持续触发重排 - 动画逻辑交给 CSS @keyframes 或
requestAnimationFrame，而非setTimeout/setInterval
合理管理 DOM 结构与样式作用域
深层嵌套、大量浮动、表格布局、内联样式泛滥，都会放大重排影响范围。精简结构可显著降低重排成本。
- 减少不必要的 DOM 节点，用 CSS 替代部分结构（如用伪元素实现装饰图标）
- 避免使用
table布局进行页面主结构设计；表格单元格变动易引发整表重排 - 给动画元素添加
contain: layout paint（CSS Containment），限制重排重绘的影响范围 - 隐藏暂时不用的元素用
visibility: hidden（保留布局）或display: none（完全移出渲染树），避免用opacity: 0配合交互事件造成无谓绘制
