How would you use DocumentFragment to optimize adding 1,000 list items?

WHAT THIS TESTS: This question tests your understanding of the browser rendering pipeline, specifically layout reflow and paint costs. Appending 1,000 elements individually inside a loop forces the browser to recalculate layout, styles, and potentially repaint up to 1,000 times, causing layout thrashing. The interviewer wants to see if you know how to batch DOM mutations off the active document tree to minimize reflows.

A GOOD ANSWER COVERS: First, instantiate a DocumentFragment with document.createDocumentFragment. Second, loop through the API response and create each li element, appending it to the fragment rather than the live DOM. Because the fragment is not part of the active document tree, these appends trigger zero reflows or repaints. Third, perform a single append of the fragment to the target parent node in the live DOM, for example ul.appendChild(fragment). Fourth, note that per the MDN specification, this operation moves the fragment's child nodes into the DOM and leaves behind an empty DocumentFragment object. The net result is exactly one reflow and one repaint regardless of child count.

COMMON WRONG ANSWERS: Claiming that DocumentFragment reduces memory usage; it does not, it reduces layout calculations. Suggesting innerHTML as the obvious better solution without acknowledging HTML parsing overhead, string escaping, or XSS risks. Failing to mention that the fragment empties itself upon insertion into the DOM. Describing the fragment as a virtual DOM or shadow DOM equivalent. Saying you would hide the parent with display none first, which is a workaround rather than the idiomatic fragment pattern.

LIKELY FOLLOW-UPS: How does this compare to using a template element or cloning a template? Would requestAnimationFrame change your approach? How would you measure the improvement using the Performance API? What happens if you need event listeners on each li; would delegation change your design? Does DocumentFragment help with memory fragmentation?

ONE CONCRETE EXAMPLE: Suppose you have an unordered list with id items. You write const fragment = document.createDocumentFragment(); data.forEach(item => { const li = document.createElement('li'); li.textContent = item.name; fragment.appendChild(li); }); document.getElementById('items').appendChild(fragment); After the last line, fragment.childNodes.length is zero and all one thousand list items appear in the page after a single layout pass.

Source: developer.mozilla.org