JavaScript性能优化的核心是减少主线程阻塞、降低内存占用、提升执行效率并兼顾可维护性，关键在于保障用户所需时的快速响应，需通过优化DOM操作、事件处理、异步任务、内存管理、资源加载及工具辅助等多维度协同改进。
JavaScript性能优化的核心是减少主线程阻塞、降低内存占用、提升执行效率，同时兼顾可维护性。关键不在于写得多快，而在于让代码在用户需要时响应得足够快。
减少重排（Reflow）和重绘（Repaint）
DOM操作频繁触发布局计算和像素绘制，是前端卡顿的常见原因。
- 批量修改样式：用className或CSS Custom Properties代替逐个设置style.xxx
- 读写分离：避免“读-改-读-改”模式，把所有读取操作集中到修改前（如先缓存offsetHeight，再批量写入）
- 使用transform和opacity做动画：它们走合成层（Compositor），不触发重排
- 对大量DOM更新，用DocumentFragment或innerHTML一次性插入
合理管理事件与异步任务
避免事件处理器堆积、宏任务/微任务误用导致的渲染延迟。
- 节流（throttle）和防抖（debounce）：用于scroll、resize、input等高频事件
- 用addEventListener的{ passive: true }选项提升滚动流畅度（尤其移动端）
- 将耗时计算移至Web Worker，避免阻塞渲染线程
- 慎用setTimeout(fn, 0)：优先考虑Promise.resolve().then()（微任务更及时）或queueMicrotask
优化内存与加载体验
内存泄漏和过大资源会拖慢页面长期运行表现，首屏加载则影响用户第一印象。
立即学习“Java免费学习笔记（深入）”；
- 及时清理引用：解绑事件监听器、清除定时器、置空大对象引用（如data = null）
- 避免闭包意外保留大对象：检查函数内是否无意捕获了DOM节点或大数据结构
- 代码分割：用dynamic import()按需加载非首屏逻辑（如路由组件、图表库）
- 压缩+缓存JS资源：启用Gzip/Brotli，设置合理Cache-Control头，利用preload预加载关键脚本
善用现代语言特性与工具辅助
新语法和工具本身不提速，但能帮你写出更可控、更易优化的代码。
- 用for...of替代for...in遍历数组（后者枚举属性，含原型链）
- 小数组用Array.from()或展开运算符；超大数组优先用for循环（避免创建中间对象）
- 开启V8 --trace-gc或Chrome DevTools的Memory面板定位内存问题
- 用Lighthouse定期审计，关注TBT（Total Blocking Time）和CLS（Cumulative Layout Shift）
不复杂但容易忽略。优化不是一步到位，而是从监控开始，定位真实瓶颈，再针对性改进。
