大量の要素を追加する際の最適な方法はどれですか？
- forループ内でappendChildを直接呼ぶ
- innerHTMLをループ内で毎回更新する
- DocumentFragmentを使ってまとめて挿入する
- setIntervalで分割して追加する
正解
- DocumentFragmentを使ってまとめて挿入する
解説
DocumentFragmentを使うことで一度にまとめてDOMに追加でき、Reflow回数を抑えて効率的に更新できます。
使用例（サンプルコード）
[ javascript ]
const fragment = document.createDocumentFragment();
for (let i = 0; i < 1000; i++) {
const li = document.createElement("li");
li.textContent = `Item ${i}`;
fragment.appendChild(li);
}
document.getElementById("list").appendChild(fragment);