10 DOM Performance Tips Every JavaScript Developer Should Know

The DOM is one of the most expensive systems inside the browser.

Every interaction with the DOM has a rendering cost.

Poor DOM manipulation patterns are one of the main reasons web applications feel slow, laggy, or unresponsive.

Modern frameworks like React and Vue were largely created to reduce direct DOM manipulation complexity.

Why DOM Operations Are Expensive

When developers modify the DOM, browsers may trigger:

• Reflow (Layout)
• Repaint

Reflow recalculates element geometry and layout positions.

This is one of the most expensive browser operations.

1. Avoid Layout Thrashing

Layout Thrashing happens when reads and writes are mixed repeatedly inside loops.

Bad Example

for (
    let i = 0;
    i < elements.length;
    i++
) {

    const width =
        elements[i].offsetWidth;

    elements[i].style.width =
        width + 10 + 'px';
}

Every iteration forces the browser to recalculate layout repeatedly.

Better Approach

const widths = [];

for (
    let i = 0;
    i < elements.length;
    i++
) {

    widths.push(
        elements[i].offsetWidth
    );
}

for (
    let i = 0;
    i < elements.length;
    i++
) {

    elements[i].style.width =
        widths[i] + 10 + 'px';
}

Batch reads first, then batch writes.

2. Use requestAnimationFrame()

requestAnimationFrame schedules visual updates efficiently before the next browser repaint.

requestAnimationFrame(() => {

    element.style.transform =
        'translateX(100px)';
});

This improves animation smoothness and reduces unnecessary layout calculations.

3. Use DocumentFragment

Appending many elements directly into the DOM repeatedly is extremely expensive.

Bad Example

for (let i = 0; i < 1000; i++) {

    const li =
        document.createElement('li');

    list.appendChild(li);
}

Optimized Example

const fragment =
    document.createDocumentFragment();

for (let i = 0; i < 1000; i++) {

    const li =
        document.createElement('li');

    fragment.appendChild(li);
}

list.appendChild(fragment);

The browser performs only one DOM insertion instead of thousands.

4. Cache DOM Queries

Repeatedly querying the DOM is slower than storing references once.

Bad Example

for (let i = 0; i < 100; i++) {

    document.querySelector(
        '.container'
    ).innerHTML += 'Item';
}

Better Example

const container =
    document.querySelector(
        '.container'
    );

for (let i = 0; i < 100; i++) {

    container.innerHTML += 'Item';
}

5. Prefer getElementById()

getElementById is generally faster than querySelector because browsers optimize ID lookups internally.

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

6. Avoid Expensive Selectors

Selectors like:

.container *

force browsers to scan large portions of the DOM tree.

Use specific selectors whenever possible.

7. Use classList Instead of Multiple Inline Styles

Bad Example

element.style.color = 'blue';

element.style.fontWeight =
    'bold';

element.style.border =
    '1px solid blue';

Better Example

element.classList.add(
    'active'
);

CSS classes reduce repeated style recalculations.

8. Animate transform and opacity Only

Properties like width, height, left, and top trigger expensive reflows.

Modern browsers optimize:

• transform
• opacity

These properties are GPU-accelerated and much smoother.

Good Animation

.box {

    transform:
        translateX(100px);

    opacity: 1;
}

9. Use IntersectionObserver

Older scroll event listeners are extremely inefficient.

Bad Example

window.addEventListener(
    'scroll',
    () => {

        // expensive calculations
    }
);

Modern Solution

const observer =
    new IntersectionObserver(
        entries => {

            entries.forEach(
                entry => {

                    if (
                        entry.isIntersecting
                    ) {

                        console.log(
                            'Visible'
                        );
                    }
                }
            );
        }
    );

observer.observe(image);

The browser handles visibility detection far more efficiently.

10. Minimize Direct DOM Manipulation

Modern frameworks optimize DOM updates internally using advanced rendering systems.

Whenever possible:

• Use React
• Use Vue
• Use Svelte
• Avoid manual DOM updates

Frameworks batch rendering operations automatically.

Best Practices

• Batch DOM reads and writes
• Reduce layout recalculations
• Use GPU-friendly animations
• Cache DOM references
• Use modern browser APIs

Conclusion

DOM performance optimization is one of the most important frontend engineering skills.

Efficient rendering dramatically improves user experience, responsiveness, and application scalability.

By reducing unnecessary reflows, batching updates, and using modern APIs like requestAnimationFrame and IntersectionObserver, developers can build much smoother web applications.