dom_dom0800_003

次の中でReflowの発生頻度を減らすベストプラクティスはどれですか？

  1. DOMを直接逐次操作する
  2. DocumentFragmentを使ってまとめて挿入する
  3. innerHTMLを使わず、文字列連結を行う
  4. setTimeoutで処理を分割する
正解
  1. DocumentFragmentを使ってまとめて挿入する
解説

DocumentFragmentを使えば複数の要素を一度に追加できるため、Reflow回数を減らし効率的にDOMを更新できます。

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

[ javascript ]

const fragment = document.createDocumentFragment();
for (let i = 0; i < 100; i++) {
  const div = document.createElement("div");
  div.textContent = `Item ${i}`;
  fragment.appendChild(div);
}
document.body.appendChild(fragment);