Layout Thrashing (Reflow/Repaint)

Your UI feels “slow” even when the code is small — because the browser is recalculating layout too often.

This is called layout thrashing, and it’s a beginner trap that makes apps feel sluggish for no obvious reason.

What layout thrashing really is

The browser renders a page in steps: style → layout → paint → composite. When you read a layout value (like offsetWidth) and then immediately change styles, the browser is forced to recalculate layout right away. Do this repeatedly in a loop and you get layout thrashing — the browser recalculates layout over and over, slowing everything down.

A simple analogy: Imagine opening a drawer to measure its width, then changing the drawer’s contents, then measuring again — every single time you do it, you force the drawer to “reset.” The browser behaves the same way with the DOM.

The key rule is:

• Batch reads of layout values
• Batch writes to styles
• Never mix reads and writes inside a tight loop

const boxes = document.querySelectorAll('.box');

// BAD: layout thrash (read + write in the same loop)
for (const box of boxes) {
const width = box.offsetWidth;   // read layout
box.style.width = (width + 20) + 'px'; // write layout
}

// GOOD: batch read, then batch write
const widths = [];
for (const box of boxes) {
widths.push(box.offsetWidth); // read phase
}

for (let i = 0; i < boxes.length; i++) {
boxes[i].style.width = (widths[i] + 20) + 'px'; // write phase
} 

This change may look small, but it prevents repeated forced layouts. That’s the difference between “snappy” and “laggy.”

I teach this kind of system thinking because it’s the real difference between “it works” and “it feels smooth.” Real coding is about understanding the underlying process — and using AI to help you think through it, not replace your logic.

Want to learn this properly?

Once this clicks, your builds change. That’s why it’s a core focus.
Real coding, AI-assisted learning, and full control over what you build.

Explore the Masterclass →

“AI Coding Freedom is not a course about memorizing syntax.
It is a structured training in developer logic, system thinking, and decision-making, using AI as a cognitive amplifier — not a shortcut”.

When you stop forcing layout updates and start batching them, your UI stops feeling like it’s “fighting” the browser.