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

How can I reduce reflows and repaints when dynamically updating a large list in the DOM?

Asked on Nov 29, 2025

Answer

To reduce reflows and repaints when dynamically updating a large list in the DOM, you can use a technique called "document fragment" to batch DOM updates and minimize performance costs.

<!-- BEGIN COPY / PASTE -->
        const list = document.getElementById('myList');
        const fragment = document.createDocumentFragment();

        for (let i = 0; i < 1000; i++) {
            const listItem = document.createElement('li');
            listItem.textContent = `Item ${i + 1}`;
            fragment.appendChild(listItem);
        }

        list.appendChild(fragment);
        <!-- END COPY / PASTE -->

Additional Comment:

Use a "document fragment" to batch DOM updates, which reduces the number of reflows and repaints.
The "document fragment" is a lightweight container that allows you to make changes off-screen.
Once all changes are made, append the fragment to the DOM in a single operation.
This approach is especially useful for large lists or frequent updates.

✅ Answered with JavaScript best practices.

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

How can I reduce reflows and repaints when dynamically updating a large list in the DOM?

Asked on Nov 29, 2025

Answer

The Q&A Network