JavaScript性能优化核心是减少主线程负担和避免重绘重排：批量DOM操作、用transform/opacity动画、requestAnimationFrame同步更新、精简CSS选择器并合理使用contain隔离。

JavaScript性能优化核心是减少主线程负担和避免不必要的渲染开销，其中控制重绘（repaint）与重排（reflow）尤为关键——它们直接拖慢页面响应速度，尤其在动画或高频交互场景中。

批量修改DOM，避免强制同步布局

每次读取元素的几何属性（如offsetTop、clientWidth、getComputedStyle()）都可能触发浏览器立即计算当前布局，若此前有未生效的样式修改，就会强制进行重排。更糟的是，如果在循环中反复“读-写”，会引发多次重排。

• 把所有样式修改集中一次完成（例如用className或cssText），再统一读取布局信息
• 需要多次读取时，先缓存结果，避免重复调用getComputedStyle()
• 使用documentFragment暂存多个节点操作，最后一次性挂载到真实DOM

用CSS transform和opacity做动画

这两个属性修改不会触发重排或重绘，只会触发合成（composite），由GPU加速处理。浏览器会为这类元素创建独立图层，动画过程仅更新图层位置或透明度，跳过昂贵的样式计算与绘制流程。

• 替代top/left/width/height等会触发布局的属性
• 对频繁动画元素添加will-change: transform（慎用，仅在必要时提前提示浏览器提升图层）
• 避免在transform中混用影响布局的值（如transform: translateX(10px) rotateZ(5deg)没问题，但transform: scale(1.2) width: 200px不行——后者width仍需重排）

合理使用requestAnimationFrame

把DOM更新逻辑放进requestAnimationFrame回调里，能确保操作与屏幕刷新节奏同步，避免在帧中间强行插入重排导致掉帧。

• 适用于滚动监听、视差效果、Canvas动画等需要视觉连续性的场景
• 避免在setTimeout或事件回调中直接修改样式，尤其是高频事件（如mousemove、scroll）
• 配合节流（throttle）进一步降低执行频次，比如每16ms最多更新一次

精简CSS选择器与避免隐式图层爆炸

复杂的CSS规则会延长样式计算时间；而过多使用transform、opacity、filter等会触发图层提升，大量独立图层会增加内存占用与合成压力，间接影响性能。

• 避免深层嵌套选择器（如.a .b .c .d div），改用语义化类名
• 用Chrome DevTools → Rendering → Layer Borders查看图层分布，识别非必要提升
• 对静态内容使用contain: layout paint style隔离样式影响范围，限制重排重绘波及区域

基本上就这些。不复杂但容易忽略——关键是养成“修改前想一想是否触发布局”的习惯，再辅以DevTools的Performance面板验证效果。