关于内容泄露问题


[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.    }