Layout Thrashing

Code Alchemist
Sep 4, 2018 · 1 min read

Read this article for more:

Basically, shipping a frame to screen has this order:

JavaScript > Style Calculation > Layout (compute size and position of elements) > Paint > Composite

Layout is expensive

Calculating size and positions of elements isn’t cheap. Different layout models come with different cost. Generally, Flexbox layout is faster than older layout models like float. So, whenever possible, consider Flexbox.

Thrashing

If the browser cannot ship a frame within 16ms, it’s noticeable because it doesn’t reach 60fps. If browser is busy re-laying out, we see layout thrashing.

What could cause layout thrashing?

Essentially, it’s repeat read-write of style.

When the code rely on style being calculated first, the browser needs to run layout in order for the code to get style information. Such repeating pattern will then cause layout thrashing.

Solution? Put read in one place and avoid repeatedly read the same style of an element. Refer to the article at the top for more information.

Use requestAnimationFrame() for smooth animation

Code Alchemist

Written by

Explore things… https://stackblitz.com/@Qi-Z

Welcome to a place where words matter. On Medium, smart voices and original ideas take center stage - with no ads in sight. Watch
Follow all the topics you care about, and we’ll deliver the best stories for you to your homepage and inbox. Explore
Get unlimited access to the best stories on Medium — and support writers while you’re at it. Just $5/month. Upgrade