JavaScript性能优化需聚焦执行效率、内存占用和渲染响应三方面，核心是避免DOM频繁操作、合理使用节流防抖、减少闭包内存泄漏、用requestIdleCallback处理低优先级任务，并通过Performance面板定位真实瓶颈。
JavaScript 性能优化不是“加个 use strict 就变快”，而是围绕执行效率、内存占用和渲染响应这三块做针对性干预。多数卡顿问题，80% 出在 DOM 操作、事件绑定不当或闭包意外持有了大对象。
避免频繁触发重排（Reflow）和重绘（Repaint）
每次读写 offsetTop、clientWidth 或修改 style 属性，都可能强制浏览器同步计算布局。连续操作会放大开销。
- 批量读取：把所有需要的几何属性一次性读完，比如先存
const rect = el.getBoundingClientRect()，再取rect.width、rect.height - 批量写入：用
className或cssText一次性应用样式，而不是逐个设el.style.color = 'red'; el.style.fontSize = '14px' - 用
transform和opacity做动画——它们走合成层（Compositor），不触发布局计算
节流（throttle）和防抖（debounce）必须按场景选对
不是所有高频事件都该用防抖；滚动、鼠标移动这类持续触发的，节流更合理；而搜索框输入、窗口大小调整，才适合防抖。
-
throttle：保证每n毫秒最多执行一次，适合监听scroll或mousemove -
debounce：最后一次触发后等待n毫秒再执行，适合input输入校验、resize - 别直接用 Lodash 的
_.throttle而不设{leading: true, trailing: true}——默认可能丢掉首尾调用
function throttle(fn, delay) {
let last = 0;
return function(...args) {
const now = Date.now();
if (now - last > delay) {
fn.apply(this, args);
last = now;
}
};
}减少闭包对大对象的隐式引用
闭包本身不慢，但若内部函数长期存活（比如绑在全局事件上），又捕获了本不该保留的大数组或 DOM 节点，就会阻止垃圾回收，导致内存泄漏。
立即学习“Java免费学习笔记（深入）”；
- 检查
console.memory和 Chrome DevTools 的 Memory 面板，用 “Heap Snapshot” 对比前后差异 - 事件监听器里避免直接传匿名函数：
el.addEventListener('click', () => doSomething(data))→ 改用预绑定或外部命名函数 - 用
WeakMap存储私有数据，它不会阻止键对象被回收
用 requestIdleCallback 处理低优先级任务
不是所有逻辑都要立刻执行。像日志上报、非关键状态更新、预加载，可以塞进空闲时段，避免抢占主线程。
- 它只在浏览器空闲时调用，且可被中断，适合耗时但不紧急的操作
- 注意兼容性：IE 不支持，需降级为
setTimeout(fn, 0)或用requestIdleCallbackpolyfill - 别在里面做 DOM 修改——它不保证在渲染前执行，可能导致 layout thrashing
if ('requestIdleCallback' in window) {
requestIdleCallback(() => {
console.log('空闲时执行');
}, { timeout: 2000 });
} else {
setTimeout(() => console.log('降级执行'), 0);
}真正影响性能的，往往不是某一行代码多慢，而是多个小决策叠加出的延迟链路。比如一个 for 循环本身很快，但如果它在每次迭代中都查一次 document.getElementById，就变成了 O(n²) 级别的开销。动手前，先用 Performance 面板录一段真实操作，看瓶颈到底落在哪。
