Layout Thrashing and Forced Reflows
The browser's style and layout process (also known as reflow) is responsible for assigning visual styles and geometry to elements of a web application. It is one of the most expensive computational operations performed during the lifecycle of a web application, yet many web developers introduce code that forces it to run more often than it needs to!
When JavaScript codepaths force the browser to perform the reflow process outside of its usual cadence, it's called a forced reflow. When codepaths perform a forced reflow multiple times in quick succession within a frame, it's known as layout thrashing.
In this tip, we'll discuss forced reflows, layout thrashing, how to spot it in your application, as well as techniques for mitigating the performance impact.
Prerequisites
I recommend familiarizing yourself with my tips on the browser rendering pipeline and the browser event loop before reading this.
A Normal (Asynchronous) Reflow
In order to present pixels on screen, the browser must compute styles (i.e. colors, font family, etc.) and compute high precision floating point screen coordinates for each visual element to draw.
It typically runs once per frame, right before pixels are about to be presented on screen. It is initiated by the browser, and run on the main thread.