javascriptのメモリリーク対策(随時更新) #JavaScript

クロージャの安易な利用を避ける

最近のモダンなブラウザでは対策されているが、
それでもメモリリークは怖いので慎重に利用する。

典型的な悪い例

badSample.html

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN">
<html>
<head>
    <title>サンプル</title>
    <script type="text/javascript">
    function test() {
        var elt = document.getElementById('i0');
        elt.src = 't2.png';
        elt.onclick = function() {
            location.href = 't2.html'; 
        }
    }
    </script>
</head>
<body>
    <div><img id="i0" src="t1.png"></div>
    <div><input type="button" onclick="test()" value="Test"/></div>
</body>
</html>

クロージャによる循環参照を引き起こしてる。

function test() {
        var elt = document.getElementById('i0');
        elt.src = 't2.png';
        elt.onclick = function() {
            location.href = 't2.html'; 
        }
    }

メモリリークの間違った検証の仕方

この確かめ方はメモリリークという問題の主眼がわかっていない。

badTest.html

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN">
<html>
<head>
    <title>サンプル</title>
    <script type="text/javascript">
    function test() {
        var elt = document.getElementById('i0');
        elt.src = 't2.png';
        elt.onclick = function() {
            location.href = 't2.html'; 
        }
    }
    </script>
</head>
<body>
    <div><img id="i0" src="t1.png"></div>
    <div><input type="button" onclick="test()" value="Test"/></div>
</body>
</html>

メモリリークとは、別のページに遷移してもメモリが開放されない問題。
このコードは同じfunctionを何度も呼んで検証しているが、そもそもtest()の中では
メモリ食いまくるようなたいした処理をしてないのでメモリリークは微々たるもの。
言いたいのは、こんな書き方してるといつか痛い目見るぞって話。

痛い目を見た例

がんがんリークする。

memoryLeak.html

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN">
<html>
<head>
    <title>サンプル</title>
    <script type="text/javascript">
    function test() {
        var dummy = [];
        for(var i=0;i<100000;i++){
            dummy[i] = i; 
        }
        var elt = document.getElementById('i0');
        elt.src = 't2.png';
        elt.onclick = function() {
            location.href = 't2.html'; 
        }
    }
    </script>
</head>
<body>
    <div><img id="i0" src="t1.png"></div>
    <div><input type="button" onclick="test()" value="Test"/></div>
</body>
</html>

対応策

明示的にnullを代入して参照を切る。

bugfixSample.html

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN">
<html>
<head>
    <title>サンプル</title>
    <script type="text/javascript">
    function test() {
        var elt = document.getElementById('i0');
        elt.src = 't2.png';
        elt.onclick = function() {
            location.href = 't2.html'; 
        }
        elt = null;
    }
    </script>
</head>
<body>
    <div><img id="i0" src="t1.png"></div>
    <div><input type="button" onclick="test()" value="Test"/></div>
</body>
</html>

いちいちnull代入するのめんどいから他の手を探す(追記予定)
参考