Improving JavaScript Performance with Efficient DOM Manipulation

By Anastasia K.4 min readFebruary 20, 2026

When working with the DOM, it is essential to understand the cost of various operations. The following sections will detail effective strategies to minimize performance bottlenecks related to DOM manipulation, supported by practical examples.

Understanding the Cost of DOM Manipulation

DOM manipulation is inherently expensive due to the need for the browser to re-compute styles and reflow layouts. Here are some common operations and their relative costs:

Operation	Cost Level
Adding/Removing Elements	High
Changing Styles	Medium
Reading Layout Properties	Medium
Querying Elements	Medium
Batch Updates	Low

1. Minimize Layout Thrashing

Layout thrashing occurs when JavaScript reads and writes to the DOM in a way that forces the browser to recalculate styles and layouts multiple times. To minimize this, batch your read and write operations.

Example of Layout Thrashing:

const element = document.getElementById('myElement');

// Bad: Causes layout thrashing
const width = element.offsetWidth;
element.style.width = (width + 10) + 'px';

Optimized Approach:

const element = document.getElementById('myElement');

// Good: Batch read and write operations
const width = element.offsetWidth;
element.style.width = (width + 10) + 'px';

2. Use Document Fragments for Batch Updates

When adding multiple elements to the DOM, using a DocumentFragment can significantly improve performance. A DocumentFragment is a lightweight container that allows you to build a subtree of elements without causing reflows.

Example:

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);

3. Avoid Frequent Style Changes

Changing styles frequently can lead to performance issues. Instead, consider applying classes that define styles, which can be managed more efficiently by the browser.

Example of Frequent Style Changes:

const box = document.getElementById('box');

// Bad: Changing styles directly in a loop
for (let i = 0; i < 100; i++) {
    box.style.width = `${i}px`;
}

Optimized Approach:

const box = document.getElementById('box');

// Good: Apply a class that contains the desired styles
box.classList.add('animate-width');

4. Use Event Delegation

Instead of attaching event listeners to individual elements, use event delegation to improve performance. This technique involves attaching a single event listener to a parent element that can handle events for multiple child elements.

Example of Event Delegation:

const list = document.getElementById('itemList');

list.addEventListener('click', function(event) {
    if (event.target.tagName === 'LI') {
        console.log('Item clicked:', event.target.textContent);
    }
});

5. Throttle and Debounce Event Handlers

When dealing with events that fire rapidly, such as scrolling or resizing, use throttling or debouncing techniques to limit the number of times a function is executed.

Example of Throttling:

function throttle(fn, wait) {
    let lastTime = 0;
    return function(...args) {
        const now = Date.now();
        if (now - lastTime >= wait) {
            lastTime = now;
            fn.apply(this, args);
        }
    };
}

window.addEventListener('scroll', throttle(() => {
    console.log('Scroll event triggered');
}, 200));

6. Optimize Selectors

Using overly complex CSS selectors can slow down DOM queries. Opt for simpler selectors or cache references to frequently accessed elements.

Example of Inefficient Selector:

const items = document.querySelectorAll('div.container > ul > li.item');

Optimized Approach:

const container = document.getElementById('container');
const items = container.getElementsByTagName('li'); // More efficient

Conclusion

By applying these best practices for DOM manipulation, developers can significantly enhance the performance of their JavaScript applications. Minimizing layout thrashing, using document fragments, avoiding frequent style changes, leveraging event delegation, throttling event handlers, and optimizing selectors are all effective strategies for creating a more responsive user experience.

Learn more with useful resources: