JavaScript性能优化核心是减少主线程阻塞、降低内存开销、提升渲染效率：通过任务拆分、DOM批量操作、CSS动画优化、内存泄漏防范及DevTools等工具精准定位瓶颈。
JavaScript性能优化核心是减少主线程阻塞、降低内存开销、提升渲染效率。关键不在于写得多快，而在于让浏览器更省力、更及时地响应用户。
减少执行时间和主线程占用
长时间运行的JS会卡住页面交互和渲染。把大任务拆成小块，用 requestIdleCallback 或 setTimeout(fn, 0) 让出控制权：
- 遍历万级数组时，每处理100项就暂停一次，等空闲再继续
- 避免在 for 循环里频繁读取 offsetHeight 等触发重排的属性，先缓存值
- 用 for 代替 forEach（尤其大数据量），减少函数调用开销
高效操作DOM和渲染
每次 DOM 修改都可能引发重排（reflow）和重绘（repaint），代价很高：
- 批量修改：用 DocumentFragment 组装好节点再一次性插入
- 隐藏时操作：用 display: none 临时隐藏元素再改样式，完事后恢复
- 用 CSS 变量 + transform/opacity 做动画，它们走合成层，不触发布局计算
合理管理内存与资源
内存泄漏常来自未清理的事件监听器、定时器或闭包引用：
立即学习“Java免费学习笔记（深入）”；
- 组件卸载时手动 removeEventListener，或用 AbortController 控制 fetch 和监听
- 避免在循环中创建新函数（如 el.addEventListener('click', () => {...})），提取为外部命名函数复用
- 大对象不用时设为 null，帮助垃圾回收器识别可释放区域
实用工具与检测手段
光靠经验不够，得靠工具定位瓶颈：
- Chrome DevTools 的 Performance 面板：录制操作，看 JS 执行耗时、渲染帧率、内存变化
- Lighthouse：一键生成性能评分，指出未压缩脚本、长任务、未使用代码等问题
- WebPageTest：多地点、多设备实测首屏时间、TTI（可交互时间）等真实指标
- why-did-you-render（React 项目）：标出不必要的组件重渲染
基本上就这些。不复杂但容易忽略——多数性能问题不是语法写错，而是没意识到某次 getBoundingClientRect 调用正让页面掉帧。
