JavaScript性能优化需针对性干预执行效率、内存占用和主线程阻塞；避免循环中重复DOM访问与计算，缓存变量；合理使用Object.freeze()和const；内存泄漏多源于未清理的事件监听器、定时器和闭包悬空引用，须用Chrome Memory面板对比heap snapshot确认。
JavaScript 性能优化不是“加个 use strict 就变快”，而是围绕执行效率、内存占用和主线程阻塞做针对性干预。多数卡顿、白屏、内存泄漏问题，都来自几个高频误操作。
避免在循环中重复计算或访问 DOM
每次访问 document.getElementById、element.style 或 array.length（尤其在 for 循环条件里）都会触发重排、重绘或属性读取开销。现代 JS 引擎虽有优化，但无法消除副作用。
- 把
document.querySelector('.list')提到循环外，缓存为变量 - 用
for (let i = 0, len = arr.length; i 替代for (let i = 0; i - 批量 DOM 操作优先用
DocumentFragment或先display: none再操作，最后一次性挂载
节流与防抖别混用，也别滥用 setTimeout
debounce 适合搜索框输入、窗口 resize；throttle 更适合 scroll、mouse move 这类高频触发场景。用错会导致响应延迟或丢失关键事件。
- 滚动监听不要直接绑
scroll，改用requestAnimationFrame+ 节流：在下一帧才读取scrollTop，避免强制同步布局 - 避免写
setTimeout(fn, 0)当“异步兜底”——它不保证时机，且可能堆积任务队列 - 现代替代方案：用
IntersectionObserver替代 scroll 判断元素可见性，用ResizeObserver替代 resize 监听
对象/数组初始化别留“空洞”，小心稀疏数组
let arr = new Array(1000000) 创建的是稀疏数组，后续 arr[i] = x 赋值会显著拖慢 V8 的优化编译（TurboFan 会降级为字典模式）。同样，obj.x = undefined 后又删掉，也会破坏隐藏类稳定性。
立即学习“Java免费学习笔记（深入）”；
- 初始化大数组用
Array.from({ length: n }, () => 0)或new Array(n).fill(0) - 对象属性尽量按固定顺序赋值，避免运行时动态增删（尤其在 hot path 上）
- 用
Object.freeze()或const声明不可变结构，帮助引擎提前判定类型稳定性
内存泄漏常藏在闭包、定时器和事件监听器里
Chrome DevTools 的 Memory 面板 + heap snapshot 对比是唯一可靠手段。光看“内存占用上升”不能断定泄漏，得确认对象是否仍被 GC root 可达。
- 事件监听器没配对
removeEventListener—— 特别注意 Vue/React 组件卸载、iframe 移除等边界场景 -
setInterval回调里引用了外部大对象（如整个组件实例），且没手动clearInterval - 闭包捕获了 DOM 元素，而该元素已被移除但监听器还在，形成“悬空引用”
真正难排查的，往往是多个小泄漏叠加后才暴露；上线前用 --inspect 启动 Node.js 或在 Chrome 中录制长周期 heap snapshot 是最务实的做法。
