首页 > 代码库 > [JS][jQuery]清空元素html("")、innerHTML="" 与 empty()的区别:关于内容泄露问题

[JS][jQuery]清空元素html("")、innerHTML="" 与 empty()的区别:关于内容泄露问题

清空元素html("")、innerHTML="" 与 empty()的区别


一、清空元素的区别
     1、错误做法一:
           $("#test").html("");//该做法会导致内存泄露
     2、错误做法二:
           $("#test")[0].innerHTML="";  ;//该做法会导致内存泄露
     3、正确做法:
	       //$("#test").empty();        


二、原理:

在 jquery 中用 innerHTML 的方法来清空元素,是必然会导致内存泄露的,由于 jquery 对于同一元素多事件处理没有直接采用浏览器事件模型,而是自己缓存事件,遍历触发,以及便于 trigger 程序触发 :

  1. // Init the element‘s event structure  
  2.         var events = jQuery.data(elem, "events") || jQuery.data(elem, "events", {}),  
  3.             handle = jQuery.data(elem, "handle") || jQuery.data(elem, "handle"function(){  
  4.                 // Handle the second event of a trigger and when  
  5.                 // an event is called after a page has unloaded  
  6.                 return typeof jQuery !== "undefined" && !jQuery.event.triggered ?  
  7.                     jQuery.event.handle.apply(arguments.callee.elem, arguments) :  
  8.                     undefined;  
  9.             });  

采用 data 方法,将一些数据关联到了元素上面,上述事件即是采用该机制缓存事件监听器。


那么就可以知道,直接 innerHTML=“” 而不通知 jquery 清空与将要删除元素关联的数据,那么这部分数据就再也释放不了了,即为内存泄露。


  1. remove: function( selector ) {  
  2.         if ( !selector || jQuery.filter( selector, [ this ] ).length ) {  
  3.             // Prevent memory leaks  
  4.             jQuery( "*"this ).add([this]).each(function(){  
  5.                 jQuery.event.remove(this);  
  6.                 jQuery.removeData(this);  
  7.             });  
  8.             if (this.parentNode)  
  9.                 this.parentNode.removeChild( this );  
  10.         }  
  11.     },  
  12.   
  13.     empty: function() {  
  14.         // Remove element nodes and prevent memory leaks  
  15.         jQuery(this).children().remove();  
  16.   
  17.         // Remove any remaining nodes  
  18.         while ( this.firstChild )  
  19.             this.removeChild( this.firstChild );  
  20.     }  

[JS][jQuery]清空元素html("")、innerHTML="" 与 empty()的区别:关于内容泄露问题