High CSS Question 183 of 229

How would you avoid layout thrashing when reading and writing the DOM?

Frontend Master · Speak this in 60–90 seconds · Faridabad & Delhi NCR

html

headbody

navmainfooter

Reading layout after writes in a loop forces the browser to recalculate style repeatedly.

Why interviewers care about CSS:

This is a process

question about CSS.

Panels listen for order,

trade-offs, and what you would actually do on a Frontend project - not buzzwords.

Stay structured

Name the idea, why it exists, then one short example.

Close cleanly

End with when you use it and one common pitfall.

Before you speak the answer, walk the interviewer through these steps:

1
Reading layout after writes
in a loop forces the browser to recalculate style repeatedly.
2
I batch reads, then
batch writes, or use rAF.
3
In React I prefer
measuring in useLayoutEffect once rather than in render.
4
Give an example
One tiny concrete case you can say aloud.
5
Common mistake
What juniors usually get wrong.
6
Close
When you pick this over the alternative.

Here's a short line you can speak, broken into clear beats:

Say this line

“I batch reads, then batch writes, or use rAF.”

Break into beats

Ibatchreadsthenbatchwrites

Speaking order

2987408337471632900

Note: Adapt this scaffold to your own project — keep it under 60–90 seconds.

Reading layout after writes in a loop forces the browser to recalculate style repeatedly. I batch reads, then batch writes, or use rAF.