2

ドキュメント フラグメントを使用して要素を追加してから 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);

ありがとう、誰かがこの問題を解決できることを願っています。

4

2 に答える 2

1

removeChild を実行すると、メモリから削除されていないものが返されます。IE と EDGE 以外のブラウザは、戻り値を使用していないことを確認してクリーンアップするのに十分なほど賢いようです。

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

于 2015-12-18T16:48:21.630 に答える