[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 程式觸發 ：

// 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 ); }