17370845950

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，减少中间数组生成

合理使用事件与定时器

未管控的事件监听和定时器容易导致内存泄漏和无谓执行。

• 绑定事件用addEventListener并配{ once: true }或手动removeEventListener，避免重复绑定
• 滚动、缩放等高频事件务必节流（throttle）或防抖（debounce），例如用requestAnimationFrame做滚动监听的轻量替代
• 清除不再需要的setTimeout/setInterval，尤其在组件卸载、页面跳转前

按需加载与代码分割

首屏不必加载全部逻辑，JS体积直接影响解析、编译和执行时间。

• 用import()动态导入模块，实现路由级或功能级懒加载
• 提取公共依赖到单独chunk（如Webpack的SplitChunksPlugin），利用浏览器缓存
• 移除未使用的代码（tree-shaking），确保ES Module语法且无副作用标记干扰

不复杂但容易忽略：加一个console.time()就能定位慢函数，用Chrome DevTools的Performance面板看帧率、堆分配和主线程占用，比猜更准。