A heavy layout process is a bad thing. A browser works in the following order:

JavaScript → Style → Layout → Painting → Composite Layers

The 'Style' is also known as a Render Tree construction.

Avoid layout wherever possible. If within one Animation frame we change styles and then ask for them, a browser should do an extra layout. Doing it often (e.g., in a cycle or scroll) leads to an event called Layout Thrashing.

To avoid Layout Thrashing read styles at the beginning of the frame and batch reading/writing of them. Prefer Flexbox and Grid over old CSS flow. It makes the layout lighter.

• What forces layout / reflow