Layout Thrashing
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.
