Question

点击add elements按钮可添加1000个div。点击remove elements可删除1000个元素。此外，我没有附加任何事件处理程序，所以我认为在我调用off()之前我不需要在div上调用remove()。
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
在时间线的开始和结束时，我收集了垃圾。

Answer 1

如果你有1000个div或只有1个div，那没关系。增加是因为按钮的事件处理程序不是div。尝试将此代码添加到删除按钮的事件处理程序：

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

您会注意到使用率会立即下降。

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

1 个答案: