在使用jQuery动态操作页面时，当我们调用remove()、empty()、html()等方法移除DOM节点，背后其实都离不开一个关键函数——cleanData()。它负责在节点真正从文档中移除之前，把绑定在节点上的事件监听器、缓存数据、动画队列等内容彻底清理干净。如果缺少这一步，被移除的节点仍然会被事件系统引用，无法被垃圾回收，久而久之就会造成内存泄漏。本文将从源码角度剖析cleanData的完整执行流程。
为什么移除节点前必须清理事件和缓存
JavaScript的垃圾回收采用的是引用计数与标记清除相结合的机制。一个DOM节点如果还有对象引用着它，即使它已经不在文档树中，也不会被回收。jQuery的事件系统采用委托绑定加中央管理的方式：调用on()绑定事件时，jQuery并不是直接把监听器挂在元素上，而是在元素上记录一个标识，再把实际的处理函数存入内部的数据对象中。
这个数据对象正是通过Data类维护的。jQuery内部有两个Data实例：data_user用于存放用户通过data()、addClass等API存取的业务数据，data_priv则存放框架私有的信息，比如事件处理函数列表、显示隐藏的状态、动画队列等。一旦这些对象持有对DOM元素的引用，而元素又通过expando属性反向关联缓存索引，就形成了一条不容易察觉的引用链。如果只是简单地把节点从DOM中摘掉，这条链依然存在，节点和它关联的所有数据都无法释放。
这就是cleanData存在的意义：它是一个统一的清理入口，确保任何节点在被丢弃之前，其事件、数据、队列等资源都被逐项归还，切断引用链，让垃圾回收器能够顺利回收内存。理解这一点，也就理解了为什么jQuery要求所有涉及节点移除的操作都走统一的内部通道而不是直接操作innerHTML或removeChild。
cleanData的源码执行流程逐行解析
先来看jQuery源码中cleanData的核心实现（以jQuery 2.x为例）：
cleanData: function( elems ) {
var data, elem, type,
special = jQuery.event.special,
i = 0;
for ( ; (elem = elems[i]) !== undefined; i++ ) {
if ( jQuery.acceptData( elem ) ) {
key = elem[ data_priv.expando ];
if ( key && (data = data_priv.cache[ key ]) ) {
if ( data.events ) {
for ( type in data.events ) {
if ( special[ type ] ) {
jQuery.event.remove( elem, type );
} else {
jQuery.removeEvent( elem, type, data.handle );
}
}
}
}
}
// 删除用户数据与私有数据
if ( data_priv.cache[ key ] ) {
delete data_priv.cache[ key ];
}
}
// 之后通过data_user.discard批量丢弃用户缓存
}整个流程可以拆解为几个步骤。第一，遍历传入的元素集合，这个集合通常包含目标节点本身及其所有后代节点，比如调用empty()时，jQuery会把子节点的querySelectorAll结果连同子节点一起传入。第二，通过jQuery.acceptData过滤掉window、document等不适合挂载数据的对象。第三，读取元素上data_priv.expando对应的键，从私有缓存中取出数据对象。
第四步是事件清理的核心：如果缓存中存在events属性，说明该元素绑定过事件。对于有特殊处理逻辑的事件类型（如submit、change、focusin这些依赖模拟机制的），调用jQuery.event.remove走完整的移除流程，其中还包含了触发相应特殊事件的清理钩子；对于普通事件，则直接调用jQuery.removeEvent，它内部就是调用原生的removeEventListener解除绑定，并顺手清理elem上的expando句柄属性。第五步，删除缓存对象中该元素对应的整条记录。最后，对于用户数据，通过data_user的discard方法批量丢弃。
removeEvent与Data.discard的底层细节
jQuery.removeEvent的实现非常朴素，却体现了框架对兼容性的封装思路：
removeEvent = document.removeEventListener ?
function( elem, type, handle ) {
elem.removeEventListener( type, handle, false );
} :
function( elem, type, handle ) {
// 针对老版本IE的detachEvent降级处理
elem.detachEvent( "on" + type, handle );
};现代浏览器中它就是对removeEventListener的封装。这里有个容易被忽略的细节：jQuery绑定时传入的handle不是用户的处理函数本身，而是一个统一的dispatch派发函数。因此移除时必须使用同一个handle引用，这也解释了为什么jQuery要把handle存在缓存里。如果直接用原生方式绑定后又随意移除，很容易因为函数引用不一致而失败。
数据缓存方面，Data类提供了destroy方法用于删除元素的所有关联数据，而discard则更进一步，会先调用destroy，再删除元素上指向缓存的expando属性，保证元素本身也彻底干净。事件系统中还预留了teardown和postDispatch等钩子，在event.remove阶段被调用，用于处理像ready这类只能触发一次的特殊事件的善后工作。这些设计共同保证了清理动作的完备性。
实际开发中的启发与手动清理方案
理解cleanData的机制之后，对日常开发有几点直接启发。第一，尽量使用jQuery的API移除节点，例如remove()、detach()、empty()，它们都会触发完整清理。但如果用原生JS执行了innerHTML = ''或removeChild，节点上的jQuery事件和数据不会被清理，可能引发泄漏。第二，detach()与remove()的区别正是是否保留数据和事件：detach用于临时摘下节点稍后放回的场景，此时不应清理缓存。
如果需要手动清理，可以模拟cleanData的逻辑：
// 手动清理单个元素的事件与数据 $(elem).off(); // 解除所有事件绑定 $.removeData(elem); // 删除用户缓存数据 $(elem).remove(); // 最后再移除节点
这段代码与cleanData做的事本质相同：先off解除事件，再removeData清缓存，最后移除节点。顺序很重要，反过来做就无法访问到待清理的数据了。第三，在大型SPA或长生命周期页面中，即便有cleanData兜底，也应避免闭包长期持有被移除节点的引用，例如全局变量缓存jQuery对象后忘记置空，同样会阻断垃圾回收。掌握cleanData的原理，能让我们在排查内存问题时快速定位到事件未解绑、数据未删除这两类最常见的元凶，写出对内存更友好的代码。