【JavaScript入門】多くの要素を高速に描画する（DocumentFragment）

JavaScriptで多くの要素を高速に追加・描画する方法について記載します。

DocumentFragment を使う

要素の追加には、appendChild や insertBefore を使用しますが、次のようにすると

// 親要素の参照を取得
var parent = document.getElementById("parent-elem");

// 親要素に複数の子要素を追加
for( ・・・ ){
  parent.appendChild(childElem);
}

// 親要素の参照を取得

var parent = document.getElementById("parent-elem");

// 親要素に複数の子要素を追加

for( ・・・ ){

parent.appendChild(childElem);

}

子要素を追加する度に、ページの再描画が行われてしまいます。

DocumentFragmentを使用すると、一括に追加・描画することができるので、描画回数が少なくなり、高速に描画することができます。

サンプル
tbody要素に1000行追加します。

html

<table>
  <thead><th>No</th><th>内容</th></thead>
  <tbody id="table-body">
  </tbody>
</table>

<table>

</tbody>

</table>

javascript

// tbodyに追加（forの中では、追加する要素を生成し、DocumentFragmentに追加します）
for(i=0; i<1000; i++){

  // 子要素trを作成
  var newTr = document.createElement("tr");
  newTr.setAttribute("id", "tr-" + i);

  // 子要素td1を作成
  var newTd1 = document.createElement("td");
  newTd1.setAttribute("id", "td1-" + i);
  newTd1.appendChild(document.createTextNode(i));

  // 子要素td2を作成
  var newTd2 = document.createElement("td");
  newTd2.setAttribute("id", "td2-" + i);
  newTd2.appendChild(document.createTextNode("テキスト" + i));

  // 子要素tr に td1、td2 を追加
  newTr.appendChild(newTd1);
  newTr.appendChild(newTd2);

  // ★ポイント★ DocumentFragmentに要素を追加
  docFrag.appendChild(newTr);

}

// 追加先の親要素の参照を取得
var parentDiv = document.getElementById("table-body");

// まとめてツリーに追加する
parentDiv.appendChild(docFrag);

// tbodyに追加（forの中では、追加する要素を生成し、DocumentFragmentに追加します）

for(i=0; i<1000; i++){

// 子要素trを作成

var newTr = document.createElement("tr");

newTr.setAttribute("id", "tr-" + i);

// 子要素td1を作成

var newTd1 = document.createElement("td");

newTd1.setAttribute("id", "td1-" + i);

newTd1.appendChild(document.createTextNode(i));

// 子要素td2を作成

var newTd2 = document.createElement("td");

newTd2.setAttribute("id", "td2-" + i);

newTd2.appendChild(document.createTextNode("テキスト" + i));

// 子要素tr に td1、td2 を追加

newTr.appendChild(newTd1);

newTr.appendChild(newTd2);

// ★ポイント★ DocumentFragmentに要素を追加

docFrag.appendChild(newTr);

}

// 追加先の親要素の参照を取得

var parentDiv = document.getElementById("table-body");

// まとめてツリーに追加する

parentDiv.appendChild(docFrag);

追加する要素を、DocumentFragmentオブジェクトに追加します。

docFrag.appendChild(newTr);

1	docFrag.appendChild(newTr);

最後に、まとめてツリーに追加しています。

parentDiv.appendChild(docFrag);

1	parentDiv.appendChild(docFrag);

また、簡単ではありますが比較用に DocmentFragment と appendChild を使用して、テーブルに1000行追加するデモを作成してみました。

ページを表示すると、画面上部に描画時間が表示されます。（残念ながら自分の環境ではそれほど差はありませんでした）

DocmentFragmentのデモ

appendChildのデモ

また、DocmentFragmentのメソッドなどは、こちらのサイトを参考にすると分かりやすいと思います。

MDN DocumentFragment