jq中html(""),empty()和remove()區別
阿新 • • 發佈:2018-12-13
比如$("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 ); }