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回调里，能确保操作与屏幕刷新节奏同步，避免在帧中间强行插入重排导致掉帧。
立即学习“Java免费学习笔记（深入）”；
- 适用于滚动监听、视差效果、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面板验证效果。
