公開日： 2018/10/06
最終更新日：2018/10/06

【JavaScript】DOMに複数要素を追加するときは、DocumentFragmentオブジェクトを使おう

JavaScript
DOMに複数オブジェクトを追加するときは、DocumentFragmentオブジェクトを使用した方が良い。
DocumentFragmentオブジェクトは、HTMLドキュメントの一時用の領域として使える。
DocumentFragmentオブジェクトに一時的にHTMLドキュメントを作成し、後で一気にDOMに追加することでパフォーマンスが上がる。

たとえば、以下の例はDocumentFragmentオブジェクトを使用しないケース。
ループごとにDOMに要素を追加し、再描画しているため、その分オーバヘッドが大きくなる。

■DocumentFragmentオブジェクトを使用しないケース
・HTML

<ul id="list"></ul>

1	<ul id="list"></ul>

・JavaScript

document.addEventListener('DOMContentLoaded', function() {
    var member = [
        { id : '0001', name : '太郎' },
        { id : '0002', name : '次郎' },
        { id : '0003', name : '三郎' }
    ];

    var list = document.getElementById('list');

    for(var i = 0, len = member.length; i < len; i++) {
        var m = member[i];
        var li = document.createElement('li');
        var text = document.createTextNode(m.id + ':' + m.name);
        li.appendChild(text);
        list.appendChild(li);
    }
}, false)

document.addEventListener('DOMContentLoaded', function() {

var member = [

{ id : '0001', name : '太郎' },

{ id : '0002', name : '次郎' },

{ id : '0003', name : '三郎' }

];

var list = document.getElementById('list');

for(var i = 0, len = member.length; i < len; i++) {

var m = member[i];

var li = document.createElement('li');

var text = document.createTextNode(m.id + ':' + m.name);

li.appendChild(text);

list.appendChild(li);

}

}, false)

■DocumentFragmentオブジェクトを使用したケース
・HTML

<ul id="list"></ul>

1	<ul id="list"></ul>

・JavaScript

document.addEventListener('DOMContentLoaded', function() {
    var member = [
        { id : '0001', name : '太郎' },
        { id : '0002', name : '次郎' },
        { id : '0003', name : '三郎' }
    ];

    var frag = document.createDocumentFragment();

    for(var i = 0, len = member.length; i < len; i++) {
        var m = member[i];
        var li = document.createElement('li');
        var text = document.createTextNode(m.id + ':' + m.name);
        li.appendChild(text);
        frag.appendChild(li);
    }
    document.getElementById('list').appendChild(frag);

}, false)