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