我遇到過一個問題,我創建了一個網格,它通過使用文檔片段動態構建並在將元素附加到div之前附加元素。我注意到appendChild和removeChild似乎是造成內存泄漏。我創建了一個演示這個的jsfiddle。我確定瀏覽器的所有插件都是禁用的(我沒有太多的開始)。如果您打開開發人員工具欄(F12)並在單擊運行時剖析內存,您會注意到內存將會增加。每次點擊它,內存都會增加。就好像垃圾收集從未發生過一樣。如果代碼存在問題,請指出。我也嘗試將它們的值添加到變量中,並將它們附加後也嘗試刪除,但它們沒有區別。IE11 appendChild/removeChild內存泄漏
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);
感謝,希望有人能幫忙這個問題。
我試圖刪除單元格,行和文檔,一旦他們被添加到他們的父母,並沒有幫助。我也嘗試將它們的值設置爲null或undefined,但仍然無效。我希望一旦這個函數在GC進入和清理後不久完成,然而事實並非如此。我也注意到,當我在頁面之間導航時,內存保持不變。 –
IE版本是11.20.10586.0 更新版本:11.0.26(KB3104002) –