Question

在以下代码中：

$(document).ready(function() {
    var content = "";
    for (var i = 0; i < 1000; i++) {
        content += "<div>Testing...</div>";
    }
    $("#Load").click(function() {
        $("#MyDiv").empty();
        $("#MyDiv").append(content);
        return false;
    });
});

加载是一个简单的链接，MyDiv是一个简单的div。在我测试的每个主要浏览器中，当我多次点击链接时，我看到任务管理器中的内存使用量上升。在IE中，它每次都会略微上升并保持不变。在FF中，它每次都会上升，但偶尔会下降（我认为这意味着内存正在被回收或垃圾收集 - 这是一个好兆头）。在Chrome中，它每次都会显着上升并保持不变。

首先，这段代码是否正确清理了DOM？如果是这样，为什么每次点击都会增加内存使用量？

注意：我尝试使示例尽可能简单，但类似于我在应用中遇到的问题。

Answer 1

将其包裹在div标签周围。它将极大地帮助并使用原生的innerHTML（它更快）。

$(document).ready(function() { 
    var content = ""; 
    for (var i = 0; i < 1000; i++) { 
        content += "<div>Testing...</div>"; 
    } 
    $("#Load").click(function() { 
        document.getElementById('MyDiv').innerHTML = ('<div>'+content+'</div>'); 
        return false; 
    }); 
});

Javascript内存使用

1 个答案: