我遇到了一个问题，我创建了一个网格，该网格通过使用文档片段并在将其附加到 div 之前向其附加元素来动态构建。我注意到 appendChild 和 removeChild 似乎导致内存泄漏。我创建了一个 jsfiddle 来演示这一点。我确保浏览器的所有插件都被禁用（我没有太多开始）。如果您在单击运行时打开开发人员工具栏 (F12) 并分析内存，您会注意到内存会增加。每次点击它，内存就会增加。就好像垃圾收集永远不会发生一样。如果代码有问题，请指出。我还尝试在附加变量后将变量的值设置为 null，并且还尝试删除，但是它们没有任何区别。
https://jsfiddle.net/k75ypb76/6
html:
<div id="grid">
</div>
<button id="btnRun">
Run
</button>
CSS：
#grid{
height: 250px;
width: 500px;
overflow: scroll;
border: 1px solid #000000;
}
.row{
border: 1px solid #ff0000;
}
.cell{
display: inline-block;
width: 40px;
background-color: #00ff00;
}
JS：
function run(){
var grid = document.getElementById('grid');
//create the grid 20 times
for(var i =0; i < 20; i++){
var doc = document.createDocumentFragment();
//clear out the grid
while (grid.firstChild) {
grid.removeChild(grid.firstChild);
}
//create 300 rows
for(var x = 0; x < 300; x++){
var row = document.createElement('div');
row.className = 'row';
//create 10 cells per row
for(var y = 0; y < 10; y++){
var cell = document.createElement('div');
cell.className = 'cell';
cell.textContent = x + '-' + y;
row.appendChild(cell);
}
doc.appendChild(row);
}
grid.appendChild(doc);
}
}
var btnRun = document.getElementById('btnRun');
btnRun.addEventListener('click', run);
谢谢，希望有人可以帮助解决这个问题。