如何用JavaScript进行性能优化？

JavaScript性能优化的核心是减少主线程阻塞、降低内存占用、提升渲染效率；需避免强制重排重绘、防范内存泄漏、实施代码分割与懒加载，并善用现代API替代低效手动实现。

JavaScript性能优化的核心是减少主线程阻塞、降低内存占用、提升渲染效率。关键不在于写得多快，而在于让浏览器更轻松地执行和绘制。

减少重排重绘（Reflow & Repaint）

每次修改DOM样式或结构，尤其是读取布局属性（如offsetTop、clientWidth）后立即写入，都可能触发强制同步重排，非常耗性能。

• 批量读取布局信息，再批量修改样式，避免“读-写-读-写”交替
• 用transform和opacity做动画，它们走合成线程，不触发布局计算
• 对频繁更新的元素，用will-change: transform提前提示浏览器做优化（但别滥用）

避免内存泄漏

闭包、定时器、事件监听器、全局变量都可能让对象无法被垃圾回收，长期运行的页面尤其要注意。

• 及时清除setInterval或setTimeout的引用，尤其在组件卸载时
• 用addEventListener时，尽量传入具名函数，方便后续用removeEventListener移除
• 避免在闭包中意外保留对大对象（如DOM节点、数组）的强引用

代码分割与懒加载

首屏不需要的JS逻辑，不必一开始就下载和解析，可显著缩短TTFB和FCP时间。

• 用import()动态导入模块，配合React.lazy或原生customElements.define按需加载
• 路由级拆分：每个页面/功能模块打包成独立chunk，Webpack/Vite默认支持
• 图片、视频等资源使用loading="lazy"，第三方脚本用async或defer"

善用现代API替代手动实现

很多老式写法在现代浏览器中已有更高效、更语义化的替代方案。

• 用requestIdleCallback处理低优先级任务（如日志上报、非关键DOM更新）
• 用IntersectionObserver代替滚动监听做懒加载，性能更稳定
• 大数据列表用虚拟滚动（windowing），只渲染可视区域内的DOM

基本上就这些。不复杂但容易忽略——多数性能问题不是语法错误，而是执行时机和资源管理没想清楚。