JAVASCRIPT
Optimize Mass DOM Appends with DocumentFragment
Learn to dramatically improve performance when adding multiple DOM elements by using a DocumentFragment, minimizing costly browser reflows and repaints.
const listContainer = document.getElementById('myList');
const fragment = document.createDocumentFragment();
const itemsToAdd = 1000; // Example: adding many elements
for (let i = 0; i < itemsToAdd; i++) {
const listItem = document.createElement('li');
listItem.textContent = `Item ${i + 1}`;
fragment.appendChild(listItem);
}
// Append the DocumentFragment to the DOM in a single operation
if (listContainer) {
listContainer.appendChild(fragment);
}
How it works: When adding many elements to the DOM directly within a loop, each `appendChild()` operation can trigger a browser reflow and repaint, severely impacting performance. A `DocumentFragment` acts as a lightweight, in-memory container. Elements are appended to the fragment first, and then the fragment itself is appended to the DOM in a single operation, causing only one reflow and repaint. This technique is crucial for optimizing dynamic list rendering and other bulk DOM updates.