以下示例中導致內存泄漏的原因是什麼？

點擊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

以下示例中導致內存泄漏的原因是什麼？

回答

相關問題