Hands-On Data Structures and Algorithms with JavaScript

Avoiding repaint and reflow

Let's first briefly talk about what a repaint and reflow are:

Repaint: An action performed by the browser when the non-geometric properties of an element change, for example, background color, text color, and so on.

Reflow: An action performed by the browser because of the geometric change to an element (or its parent) directly or via a computed property. This process is same as the Layout discussed earlier.

While we cannot completely prevent Repaint and Reflow events completely, we can certainly play our part in minimizing the changes that trigger these operations. Almost all DOM read operations (such as offsetWidth and getClientRects) trigger a Layout event because the values of such read operations are done ...