dom_dom0700_004

DocumentFragment に要素を貯めてから parent.( A ) で挿入すると、個別追加に比べて ( B ) の回数を減らせる。

解答

A: appendChild(fragment)
B: reflow（レイアウト計算）

解説

断片をまとめて挿入するため、DOM 変更に伴う再レイアウト・再描画を最小化できます。

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

[ html ]

<ol id="log"></ol>
<script>
  const frag = new DocumentFragment();
  ['A','B','C','D'].forEach(t=>{
    const li = document.createElement('li');
    li.textContent = t;
    frag.appendChild(li);
  });
  document.getElementById('log').appendChild(frag);
</script>