为什么这段代码会导致JavaScript内存泄漏？函数框架（）{ this.divs=[]； this.extra=新阵列（2000）； } Frame.prototype.reloadMapMarker=函数（）{ //appendMapMarker2（）； appendMapMarker1（）； }; 函数divClick（）{ } //一个大惊喜！！！函数appendMapMarker1（）{ var div=document.getElementById（'test'）； $（div.empty（）； var frag=document.createDocumentFragment（）；对于（var i=0；i_Javascript_Memory Leaks

为什么这段代码会导致JavaScript内存泄漏？函数框架（）{ this.divs=[]； this.extra=新阵列（2000）； } Frame.prototype.reloadMapMarker=函数（）{ //appendMapMarker2（）； appendMapMarker1（）； }; 函数divClick（）{ } //一个大惊喜！！！函数appendMapMarker1（）{ var div=document.getElementById（'test'）； $（div.empty（）； var frag=document.createDocumentFragment（）；对于（var i=0；i

javascript memory-leaks

为什么这段代码会导致JavaScript内存泄漏？函数框架（）{ this.divs=[]； this.extra=新阵列（2000）； } Frame.prototype.reloadMapMarker=函数（）{ //appendMapMarker2（）； appendMapMarker1（）； }; 函数divClick（）{ } //一个大惊喜！！！函数appendMapMarker1（）{ var div=document.getElementById（'test'）； $（div.empty（）； var frag=document.createDocumentFragment（）；对于（var i=0；i,javascript,memory-leaks,Javascript,Memory Leaks,您的内存泄漏非常明显。您在frame.divs数组中放入了“无限”个元素。因此，每次调用appendMapMaker*函数时都重置frame.divs数组。基本上如下所示： <!doctype html> <head> <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.4/jquery.min.js"></script> <script>

您的内存泄漏非常明显。您在

frame.divs

数组中放入了“无限”个元素。因此，每次调用appendMapMaker*函数时都重置

frame.divs

数组。基本上如下所示：

    <!doctype html>
<head>
    <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.4/jquery.min.js"></script>
    <script>
    function Frame(){
        this.divs=[];
        this.extra = new Array(2000);
    }

    Frame.prototype.reloadMapMarker = function(){
        //appendMapMarker2();
        appendMapMarker1();
    };

    function divClick(){

    }

    //a big surprise!!!
    function appendMapMarker1(){
        var div = document.getElementById('test');
        $(div).empty();
        var frag=document.createDocumentFragment();
        for(var i=0; i<100; i++){
            var newDiv=document.createElement('div');
            newDiv.onclick = divClick;
            newDiv.innerHTML = String(i);
            frag.appendChild(newDiv);
            frame.divs.push(newDiv);
        }
        div.appendChild(frag);
    }

    //less memory leak
    function appendMapMarker2(){
        var div = document.getElementById('test');
        var str = [];
        for(var i=0; i<100; i++){
            str.push('<div onclick="divClick()" style="margin:2px;border:1px solid #eee;">',i,'</div>');
            frame.divs.push(div.children[div.children.length-1]);
        }
        div.innerHTML = str.join('');
    }

    var frame =new Frame();
    window.onload=function(){
        setInterval(frame.reloadMapMarker,100);
    };
    </script>
</head>
<body>
    <div id="test"></div>
</body>

我不这么认为，如果你是对的，appendMapMarker2和appendMapmarker1在内存开销上是一样的。但是appendMapmarker1将以8M/s的速度消耗内存。appendMapMarker2是20K/s。我是对的。我只运行了修改后的appendMapmarker1方法一分钟：没有内存泄漏。appendMapMarker2没有泄漏的原因是你有一个例外在中，这会导致没有元素添加到frame.divs数组中。那么，如果我们重置frame.divs，代码中是否没有内存泄漏？

function appendMapMarker*() {
    frame.divs = [];
    // ....
}