DOM Rendering Performance

What optimization technique does this code implement?

const fragment = document.createDocumentFragment();
for (let i = 0; i < 1000; i++) {
  const div = document.createElement('div');
  div.textContent = `Item ${i}`;
  fragment.appendChild(div);
}
document.getElementById('container').appendChild(fragment);

Virtual DOM diffing
Event delegation
DOM batching
This code implements DOM batching using DocumentFragment, which is a lightweight container for holding DOM nodes temporarily. This optimization: 1) Reduces the number of live DOM updates to a single operation, 2) Prevents multiple reflow/repaint cycles, 3) Improves performance when adding multiple elements, 4) Minimizes layout thrashing. Instead of adding each element directly to the DOM (causing multiple reflows), all elements are first added to the fragment, then the fragment is added to the DOM in one operation, triggering only one reflow.
Lazy loading

Next Question (4/20)