2

我遇到過一個問題,我創建了一個網格,它通過使用文檔片段動態構建並在將元素附加到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); 

感謝,希望有人能幫忙這個問題。

+0

我試圖刪除單元格,行和文檔,一旦他們被添加到他們的父母,並沒有幫助。我也嘗試將它們的值設置爲null或undefined,但仍然無效。我希望一旦這個函數在GC進入和清理後不久完成,然而事實並非如此。我也注意到,當我在頁面之間導航時,內存保持不變。 –

+0

IE版本是11.20.10586.0 更新版本:11.0.26(KB3104002) –

回答

1

好吧,這很有趣。在使用拼寫檢查器的Windows 7,8,8.1上,IE11中存在已知問題。有一個修復程序已經發布,並在12月8日更新中發佈。但是,這似乎並不適用於Windows 10.問題仍然存在。我一直在考慮,現在的解決方法是編輯註冊表:

[HKEY_CURRENT_USER \ SOFTWARE \微軟\的Internet Explorer \ MAIN \ FeatureControl \ FEATURE_SPELLCHECKING] 「IEXPLORE.EXE」= DWORD:00000000

希望這幫助別人。

+0

顯然,Windows 7,8和8.1的修補程序不適用於Windows 10.我還沒有嘗試過這些,因爲我在Windows 10上運行,但如果您在其他人之一上,它可能會對您有所幫助:https:/ /support.microsoft.com/en-us/kb/3119070 –

1

當你移除孩子時,那些沒有從內存中移除的回報 - IE和EDGE以外的瀏覽器似乎足夠聰明,看到你沒有使用返回值併爲你清理。

參考: https://github.com/mootools/mootools-core/issues/2225

+0

感謝您的迴應。我之前看過這篇文章,但是這並沒有解決問題。另外,你的例子會拋出一個錯誤(對不起)。還在尋找。 –

+0

是的,在我發佈之後,錯誤引起了我的注意,所以我刪除了「解決方案」。但是我留下了我學到的信息,因爲我在幾個不同的地方發現了它,並認爲它至少是教育性的,如果不是真的有用的話。我很高興你找到了一個解決方案,但令人沮喪的是它無法通過JavaScript代碼修復。我無法想象必須告訴客戶他們必須編輯註冊表才能使其瀏覽器正常工作,這是多麼糟糕。 –