Ask any question about JavaScript here... and get an instant response.

How can I minimize reflows and repaints when updating multiple DOM elements in a loop?

Asked on Nov 06, 2025

Answer

To minimize reflows and repaints when updating multiple DOM elements, you can use a Document Fragment or batch DOM updates outside the loop. This reduces the number of times the browser has to re-render the page.

<!-- BEGIN COPY / PASTE -->
        const fragment = document.createDocumentFragment();
        
        for (let i = 0; i < 100; i++) {
            const newElement = document.createElement('div');
            newElement.textContent = `Item ${i}`;
            fragment.appendChild(newElement);
        }
        
        document.getElementById('container').appendChild(fragment);
        <!-- END COPY / PASTE -->

Additional Comment:

Use a Document Fragment to batch DOM updates, which minimizes reflows and repaints.
The example creates a fragment, appends new elements to it, and then adds the fragment to the DOM in one operation.
This approach is efficient because it reduces the number of times the DOM is updated.

✅ Answered with JavaScript best practices.

Ask any question about JavaScript here... and get an instant response.

How can I minimize reflows and repaints when updating multiple DOM elements in a loop?

Asked on Nov 06, 2025

Answer

The Q&A Network