読者です 読者をやめる 読者になる 読者になる

tanaka's Programming Memo

プログラミングについてのメモ。

HTML要素の追加

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


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

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>