【JavaScript 性能优化方法】
JavaScript 性能优化方法
减少 DOM 操作
频繁的 DOM 操作会导致浏览器重绘和回流，影响性能。使用文档片段（DocumentFragment）或虚拟 DOM 技术减少直接操作。
const fragment = document.createDocumentFragment();
for (let i = 0; i < 100; i++) {const div = document.createElement('div');fragment.appendChild(div);
}
document.body.appendChild(fragment);
事件委托
减少事件监听器的数量，利用事件冒泡机制将事件处理程序委托到父元素。
document.getElementById('parent').addEventListener('click', function(e) {if (e.target.matches('li')) {console.log('List item clicked');}
});
避免全局查找
将全局变量缓存到局部变量中，减少作用域链查找时间。
function updateElements() {const doc = document; // 缓存全局变量const divs = doc.getElementsByTagName('div');// 后续操作
}
使用节流和防抖
对于频繁触发的事件（如滚动、输入），使用节流（throttle）和防抖（debounce）限制执行频率。
function debounce(func, delay) {let timeout;return function() {clearTimeout(timeout);timeout = setTimeout(() => func.apply(this, arguments), delay);};
}
优化循环
减少循环中的计算量，避免在循环中执行 DOM 操作或重复计算。
// 预先计算数组长度
const arr = [1, 2, 3];
const len = arr.length;
for (let i = 0; i < len; i++) {console.log(arr[i]);
}
使用 Web Workers
将 CPU 密集型任务放到 Web Workers 中执行，避免阻塞主线程。
// 主线程
const worker = new Worker('worker.js');
worker.postMessage(data);
worker.onmessage = function(e) {console.log(e.data);
};// worker.js
self.onmessage = function(e) {const result = heavyTask(e.data);self.postMessage(result);
};
代码压缩和懒加载
使用工具如 Webpack 或 Rollup 进行代码压缩和分割，按需加载资源。
// 动态导入实现懒加载
import('./module.js').then(module => {module.init();
});
避免内存泄漏
及时清除定时器、事件监听器和引用，防止内存泄漏。
// 清除定时器
const timer = setInterval(() => {}, 1000);
clearInterval(timer);// 移除事件监听器
element.removeEventListener('click', handler);
使用性能分析工具
借助 Chrome DevTools 的 Performance 和 Memory 面板，定位性能瓶颈。
console.time('test');
// 测试代码
console.timeEnd('test');