HTML要素の追加 - tanaka's Programming Memo

HTML要素を追加する時のパフォーマンスをチェックしてみた。

テスト環境：MacBookAir2014

追加方法	innerHTML	DocumentFragment	appendChild	innerHTML文字列結合
Firefox	17-25ms	27-38ms	32-40ms	15-25ms
Google Chrome	25-30ms	52-90ms	55-80ms	20-35ms
Safari	30-35ms	140-170ms	780-930ms	23-30ms

以下のプログラムを、それぞれのブラウザの開発ツールを表示して実行。コンソールに結果が表示されるので、１０回ぐらい実行しておおよその実行時間をまとめた。

innerHTMLのテストプログラム

<!doctype html>
<html>
<head>
    <meta charset="UTF-8">
    <title>innerHTML速度テスト</title>
</head>
<body>
<div>
</div>
    <script>
        var elem;
        var test= 'innerHTMLで追加';
        console.time(test);
        elem = document.getElementsByTagName('div');
        var tags = [];
        for (var i=0 ; i<10000 ; i++) {
            tags.push("<span>["+i+"]</span>");
        }
        elem[0].innerHTML = tags.join('');
        console.timeEnd(test);
    </script>
</body>
</html>

DocumentFragmentのテストプログラム

<!doctype html>
<html>
<head>
    <meta charset="UTF-8">
    <title>DocumentFragment速度テスト</title>
</head>
<body>
<div>
</div>
    <script>
        var elem;
        // appendで追加
        var test= 'appendChildで追加';
        console.time(test);
        var fragment = document.createDocumentFragment();
        elem = document.getElementsByTagName('div');
        for (var i=0 ; i<10000 ; i++) {
            var span = document.createElement('span');
            span.innerHTML = "["+i+"]";
            fragment.appendChild(span);
        }
        elem[0].appendChild(fragment);
        console.timeEnd(test);
    </script>
</body>
</html>

appendChildのテストプログラム

<!doctype html>
<html>
<head>
    <meta charset="UTF-8">
    <title>appendChild速度テスト</title>
</head>
<body>
<div>
</div>
    <script>
        var elem;
        // appendで追加
        var test= 'appendChildで追加';
        console.time(test);
        elem = document.getElementsByTagName('div');
        for (var i=0 ; i<10000 ; i++) {
            var span = document.createElement('span');
            span.innerHTML = "["+i+"]";
            elem[0].appendChild(span);
        }
        console.timeEnd(test);
    </script>
</body>
</html>

innerHTMLで、文字列結合した時のテストプログラム

<!doctype html>
<html>
<head>
    <meta charset="UTF-8">
    <title>innerHTML速度テスト</title>
</head>
<body>
<div>
</div>
    <script>
        var elem;
        var test= 'innerHTMLで追加';
        console.time(test);
        elem = document.getElementsByTagName('div');
        var tags = "";
        for (var i=0 ; i<10000 ; i++) {
            tags+="<span>["+i+"]</span>";
        }
        elem[0].innerHTML = tags;
        console.timeEnd(test);
    </script>
</body>
</html>