1. 程式人生 > >jq中html(""),empty()和remove()區別

jq中html(""),empty()和remove()區別

 

比如$("p").empty()和$("p").html(""),都是把<p>abcd</p>中的文字移除,留下 了<p></p>,仍保留其在dom中所佔的位置

但是html("")會造成記憶體洩漏,empty()會釋放記憶體,感興趣的朋友可以用html(""),empty("")分別測試,用chrome的工作管理員檢測記憶體使用。

$("p").remove()則是把其從dom中刪除,什麼都不留,既不會保留其所佔的位置。 

 

記憶體洩漏拓展:

在 jQuery 中用 innerHTML 的方法來清空元素,是必然會導致記憶體洩露的,由於 jquery 對於同一元素多事件處理沒有直接採用瀏覽器事件模型,而是自己快取事件,遍歷觸發,以及便於 trigger 程式觸發 :

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

採用 data 方法,將一些資料關聯到了元素上面,上述事件即是採用該機制快取事件監聽器。

那麼就可以知道,直接 innerHTML=“” 而不通知 jquery 清空與將要刪除元素關聯的資料,那麼這部分資料就再也釋放不了了,即為記憶體洩露。

remove: function( selector ) { 
 if ( !selector || jQuery.filter( selector, [ this ] ).length ) { 
  // Prevent memory leaks 
  jQuery( "*", this ).add([this]).each(function(){ 
  jQuery.event.remove(this); 
  jQuery.removeData(this); 
  }); 
  if (this.parentNode) 
  this.parentNode.removeChild( this ); 
 } 
 }, 
 empty: function() { 
 // Remove element nodes and prevent memory leaks 
 jQuery(this).children().remove(); 
 
 // Remove any remaining nodes 
 while ( this.firstChild ) 
  this.removeChild( this.firstChild ); 
 }