複数要素を追加するとき、( A )を繰り返すとReflowが頻発するため、( B )を使ってまとめて追加すると効率的である。
解答
A: appendChild
B: DocumentFragment
解説
DocumentFragmentを使うと、仮想的なコンテナに一括追加でき、最後にまとめてDOMに挿入するためReflowが1回で済む。
使用例(サンプルコード)
[ javascript ]
const fragment = document.createDocumentFragment();
for (let i = 0; i < 100; i++) {
const li = document.createElement("li");
li.textContent = `Item ${i}`;
fragment.appendChild(li);
}
list.appendChild(fragment);