大家好，我是第八哥，作为一名干了10年的前端老兵，DOM操作这块，我真是踩过不少坑。尤其是性能和内存这俩块，踩一次学一次。
今天咱们就聊聊DOM操作性能优化里的两大关键点：事件委托和内存泄漏预防。
事件委托：减少事件监听器的利器
你有没有给一个页面里的每个按钮都绑定过事件？如果有，那你肯定也感受过性能的“压迫感”。这就是典型的不优雅用法。
事件委托的原理其实很简单：利用事件冒泡机制，把事件绑定在父元素上。
比如下面这个代码：
document.getElementById('list').addEventListener('click', function (e) {
if (e.target.tagName.toLowerCase() === 'li') {
console.log('点击了：', e.target.innerText);
}
});这样写，只需要绑一次事件监听器，比你每个 li 都绑一个，即省事还省资源。
事件委托的优缺点
优点：
- 1. 大幅减少事件监听器的数量。
- 2. 动态添加的子元素也能自动响应。
- 3. 节省内存、提升性能。
缺点：
- 1. 需要处理事件源判断逻辑。
- 2. 某些事件（比如
focus、blur）不会冒泡。
所以在选用事件委托时，别硬上，要考虑事件类型是否适合。
内存泄漏：你看不见的性能杀手
内存泄漏这事，很多时候发生了你都察觉不到。项目一上线，发现页面越来越卡，刷新也无效，可能就是内存被“吃光”了。
常见的泄漏点包括：
- 1. 未移除的事件监听器。
- 2. 被引用的 DOM 元素未释放。
- 3. 闭包不当使用。
怎么预防内存泄漏？
最实用的方法就是：用完就清理。比如移除 DOM 的同时别忘了解绑事件。
function bindClick(el) {
function handler() {
console.log('clicked');
}
el.addEventListener('click', handler);
return function cleanup() {
el.removeEventListener('click', handler);
};
}你看，返回一个清理函数，方便后续释放资源。可别小看这一句，关键时候能救你命。
事件委托结合内存管理，双保险！
事件委托不仅节省监听器，还天然降低了内存泄漏风险。你只绑一个监听器，自然就不容易忘记解绑了。
比如在组件卸载或页面跳转前，我们只需要清理一次即可：
const handler = (e) => {
/* 逻辑 */
};
parent.addEventListener('click', handler);
// 页面卸载或组件销毁时
parent.removeEventListener('click', handler);实战技巧：开发中怎么用更稳？
- 1. 使用 事件代理 时，记得加
e.target判断，避免误触。 - 2. 写组件时，用 闭包返回清理函数，利于生命周期管理。
- 3. 配合
MutationObserver监听 DOM 变化，自动管理事件。 - 4. 不要把 DOM 节点挂在全局变量上，容易误用造成泄漏。
小结：优化从每一行代码开始
写代码时只图“能跑”的年代早就过去了。现在大家比的，是谁的代码更轻、更快、更不出问题。
合理运用事件委托，是前端性能优化的入门功夫；而时刻警惕内存泄漏，则是你晋级资深的必经之路。
下次动手写代码时，记得多问自己一句：我这行代码，会不会让页面变慢？
如果你还遇到过什么奇葩的 DOM 性能问题，欢迎留言一起交流！
评论