JavaScript性能优化是前端开发中无法绕开的话题。当页面交互变复杂、数据量变大时，脚本执行效率会直接影响用户体验。本文从实际项目出发，总结几项容易上手且效果明显的优化技巧。
一、减少不必要的DOM操作
DOM操作比普通JS计算慢很多，频繁读写会触发重排重绘。建议先把多次修改放在文档片段里，最后一次插入。
// 批量添加列表项，避免反复操作DOM
var frag = document.createDocumentFragment();
for (var i = 0; i < 100; i++) {
var li = document.createElement('li');
li.textContent = '项目' + i;
frag.appendChild(li);
}
document.getElementById('list').appendChild(frag);
二、使用事件委托
给大量子元素逐个绑定事件会消耗内存。利用冒泡机制，在父级统一处理即可。
// 列表点击委托到ul上
document.getElementById('list').addEventListener('click', function(e) {
if (e.target && e.target.nodeName === 'LI') {
console.log('点击了', e.target.textContent);
}
});
三、防抖与节流控制高频事件
resize、scroll、input等事件触发密集，用防抖和节流限制执行频率。
// 简易防抖函数
function debounce(fn, delay) {
var timer = null;
return function() {
var ctx = this, args = arguments;
clearTimeout(timer);
timer = setTimeout(function() {
fn.apply(ctx, args);
}, delay);
};
}
window.addEventListener('resize', debounce(function() {
console.log('窗口变化结束');
}, 200));
四、小心闭包导致的内存占用
闭包能保存变量，但引用不当会让旧数据无法回收。不需要的引用及时置空。
function bindBigData() {
var data = new Array(100000).join('x');
return function() {
// 仅使用部分数据
return data.length;
};
}
var getLen = bindBigData();
// 若不再使用，释放引用
getLen = null;
五、字符串拼接与循环优化
少量拼接可用加号，大量拼接用数组join更高效。循环内避免创建对象或函数。
// 数组join拼接字符串
var arr = [];
for (var i = 0; i < 1000; i++) {
arr.push('行' + i);
}
var html = arr.join('');
六、其他实用建议
- 用
const和let替代var，作用域更清晰 - 复杂计算可丢到Web Worker，避免阻塞主线程
- 图片或请求类操作尽量合并，减少网络开销
性能优化不是一次性工作，建议在开发中用浏览器性能面板定期排查瓶颈。
以上技巧来自日常实战，不需要引入额外库就能应用。根据业务场景组合使用，页面流畅度通常会有肉眼可见的提升。
JavaScript性能优化闭包事件委托防抖节流修改时间：2026-07-24 15:21:23