以下示例中导致内存泄漏的原因是什么？

点击add elements按钮会添加1000个div。然后点击remove elements删除1000个元素。此外，我没有附加任何事件处理程序，所以我认为在拨打remove()之前，我不需要在div上调用off()。
Codepen Link 以下示例中导致内存泄漏的原因是什么？

<html> 
<head> 


</head> 
<body> 
<button id="addDivs">add elements</button> 
<button id="removeDivs">remove elements</button> 


<div id="box"></div> 


    <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script> 
<script type="text/javascript"> 


$("#addDivs").on("click", function(){ 

    var i; 
    var div; 

    for(i=0; i< 1000; i++){ 
     div = $("<div>"); 
     div.html(i); 
     $("#box").append(div); 

     //div.on("click",function(){ 
     // console.log($(this).text()); 
     //}); 
    } 

}); 



$("#removeDivs").on("click", function(){ 

    $("#box div").each(function(){ 
     //$(this).off(); 
     $(this).remove(); 
    }); 


}); 


</script> 
</body> 
</html>

Screenshot of chrome timeline
开始和时间表的最后，我也收集垃圾。

来源

2017-04-05 labeeb ahmad

请修复您的codepen链接，它必须被复制粘贴当前。谢谢 –

@AnuradhaKulkarni已修复，现在开始工作。 –

不要在循环内添加元素。将所有元素推送到一个数组，并在循环后执行一个'.append（）'调用。这已经可以节省大量的时间和内存。按照编程，浏览器必须至少访问2000次页面才能添加所有的div，其中2次就足够了。去除也一样。如果该框只包含div，则只需将该框的innerHTML设置为无，将一次移除所有div，而不是逐个删除它们，每次都会触发DOM查找。技术上，没有内存泄漏，只是非常低效的内存使用。 – Shilly

如果您有1000个div或只有1个div，这并不重要。增加是因为你的按钮不是div的事件处理程序。尝试添加该代码删除按钮的事件处理程序：

$("#removeDivs").off("click"); 
$("#addDivs").off("click");

你会发现使用立即落下。

来源

2017-04-05 13:34:00

以下示例中导致内存泄漏的原因是什么？

回答

相关问题