createDocumentFragment()を使って複数の要素をまとめてDOMに追加する

DOMへの複数の要素追加をcreateDocumentFragment()を使って試してみます。

サンプルコード

まずは使わない場合の例です。

<div id="sample"></div>

var list = [
  '愛園愛美',
  '相羽ういは',
  〜 略 〜
  '童田明治'
];

var wrapper = document.getElementById('sample');
for (var i = 0; i < list.length; i++) {
  var item = document.createElement('div');
  item.textContent = list[i];
  wrapper.appendChild(item);
}

createDocumentFragment()を使わない場合のデモページ
これで要素の追加は行えていますが、要素を生成する毎にDOMに追加しているため、パフォーマンス的にはよくありません。

次にcreateDocumentFragment()を使ってみます。

var list = [
  '愛園愛美',
  '相羽ういは',
  〜 略 〜
  '童田明治'
];

var wrapper = document.getElementById('sample');
var fragment = document.createDocumentFragment();
for (var i = 0; i < list.length; i++) {
  var item = document.createElement('div');
  item.textContent = list[i];
  fragment.appendChild(item);
}
wrapper.appendChild(fragment);

createDocumentFragment()を使った場合のデモページ
これで先ほどと同様に要素の追加が行えました。

先ほどとの違いは要素生成後に一旦DocumentFragmentに追加しておき、ループ終了後にまとめてDOMに追加している点です。
DocumentFragmentはメインのDOMとは別に要素をまとめておけるDOMのようなもので、メインのDOMへの要素の追加を最小限にすることで、最初の例と比べてパフォーマンスの改善を見込めます。