JavaScript性能优化核心是减少主线程阻塞、内存开销、重复计算和提升渲染效率；需批量读写DOM、用transform/opacity动画、慎用will-change、优先for循环并缓存arr.length。
JavaScript性能优化核心在于减少主线程阻塞、降低内存开销、避免重复计算和提升渲染效率。不追求炫技，而是让代码更轻、更快、更稳。
减少重排（Reflow）与重绘（Repaint）
DOM操作是高频性能杀手，每次修改样式或结构都可能触发浏览器重新计算布局和绘制。
- 批量读写分离：先集中读取offsetHeight、getComputedStyle等，再统一写入样式，避免“强制同步布局”
- 用
transform和opacity做动画：它们走合成层（Compositor），不触发布局和绘制 - 对频繁更新的元素使用
position: absolute或will-change: transform（慎用，仅对明确要动画的元素）
高效处理数组与循环
小细节累积起来影响显著，尤其在大数据量或高频执行场景下。
- 遍历优先选
for而不是forEach或for...of：少了函数调用开销和迭代器对象创建 - 避免在循环中反复访问对象属性或数组长度：
for (let i = 0, len = arr.length; i - 大数据过滤/映射时，考虑
Array.prototype.filter().map()是否可合并为单次reduce，减少中间数组生成
合理使用事件与定时器
未管控的事件监听和定时器容易导致内存泄漏和无谓执行。
立即学习“Java免费学习笔记（深入）”；
- 绑定事件用
addEventListener并配{ once: true }或手动removeEventListener，避免重复绑定 - 滚动、缩放等高频事件务必节流（throttle）或防抖（debounce），例如用
requestAnimationFrame做滚动监听的轻量替代 - 清除不再需要的
setTimeout/setInterval，尤其在组件卸载、页面跳转前
按需加载与代码分割
首屏不必加载全部逻辑，JS体积直接影响解析、编译和执行时间。
- 用
import()动态导入模块，实现路由级或功能级懒加载 - 提取公共依赖到单独chunk（如Webpack的
SplitChunksPlugin），利用浏览器缓存 - 移除未使用的代码（tree-shaking），确保ES Module语法且无副作用标记干扰
不复杂但容易忽略：加一个console.time()就能定位慢函数，用Chrome DevTools的Performance面板看帧率、堆分配和主线程占用，比猜更准。
