JavaScript性能优化核心是减少执行时间、内存占用和提升响应速度，关键在于提升浏览器解析、执行与渲染效率，涵盖DOM操作优化、事件与内存管理、代码轻量化及加载时机控制。
JavaScript性能优化核心在于减少执行时间、降低内存占用、提升响应速度。关键不是写得多快，而是让浏览器更高效地解析、执行和渲染。
减少重排（Reflow）与重绘（Repaint）
DOM操作频繁触发重排重绘，是前端卡顿的常见原因。每次修改元素样式（尤其是几何属性如width、height、top、left）或读取offsetTop、getBoundingClientRect()等布局信息，都可能强制浏览器同步计算样式和布局。
- 批量修改样式：用className或cssText一次性设置，避免多次赋值style.xxx
- 读写分离：先集中读取所有布局信息（如循环中先存好offsetHeight），再统一写入，避免“强制同步布局”
- 对动画元素使用transform和opacity：它们走合成层（Compositor），不触发布局和绘制，性能更好
- 用documentFragment批量插入节点，避免多次挂载引发重复重排
合理使用事件与内存管理
事件监听器泄漏和闭包不当是内存增长的主因，尤其在单页应用中容易积累无用对象。
- 及时解绑事件：组件卸载、弹窗关闭时调用removeEventListener；或用事件委托减少监听器数量
- 避免长生命周期闭包引用大对象：例如在定时器或回调中不要意外捕获整个this或大型数组
- 手动清理不再需要的定时器：clearTimeout/clearInterval，尤其在异步请求未完成就离开页面时
- 对大数组/对象，不用时设为null，帮助GC回收（尤其IE或低版本移动端）
代码层面的轻量化实践
运行时效率往往取决于细节选择，有些写法看似等价，实际开销差异明显。
立即学习“Java免费学习笔记（深入）”；
- 用for代替forEach/map处理大数组：避免函数调用开销和额外闭包创建
- 条件判断优先用switch或查表（对象映射）替代长if-else if链，尤其分支多且稳定时
- 字符串拼接用template literals（`xxx${val}xxx`）或Array.join()，比+=更高效（V8引擎已优化，但仍有可读性和潜在优势）
- 避免在循环内执行重复计算：如arr.length提前缓存，正则表达式提取到循环外并复用RegExp实例
加载与执行时机控制
JS阻塞HTML解析，延迟首屏时间。优化重点是“按需加载”和“错峰执行”。
- 脚本加async或defer：第三方统计、非关键逻辑用async；依赖DOM的逻辑用defer
- 动态导入import()：路由级或交互级代码懒加载，减小首包体积
- 用requestIdleCallback做低优先级任务（如日志上报、预加载），避免抢占主线程
- 复杂计算移交Web Worker：如图像处理、数据解析，防止UI冻结
基本上就这些。优化不必一步到位，建议从Lighthouse报告或Performance面板定位瓶颈，再针对性调整。不复杂但容易忽略——比如一个没清理的setInterval，可能让页面越跑越慢。
