dom_dom0700_003

DocumentFragment を使う主な利点として最も適切なのはどれか。

  1. 作成したノードが自動的に仮想DOMへ変換される
  2. 複数の挿入をまとめて行え、レイアウト計算の回数を抑えられる
  3. 子ノードを持てないためメモリ消費が少ない
  4. Shadow DOM のみで使用できる
正解
  1. 複数の挿入をまとめて行え、レイアウト計算の回数を抑えられる
解説

DocumentFragment は「軽量コンテナ」で、フラグメント上でノードを構築し、最後にまとめて実DOMへ移動できる。これにより reflow/repaint の発生回数を減らし効率的。

使用例（サンプルコード）

[ html ]

<ul id="items"></ul>
<script>
  const frag = document.createDocumentFragment();
  for (let i = 0; i < 1000; i++) {
    const li = document.createElement('li');
    li.textContent = `Item ${i}`;
    frag.appendChild(li);
  }
  document.getElementById('items').appendChild(frag); // ここで一括挿入
</script>