...

/

Reducing Browser Reflows

Reducing Browser Reflows

Browser reflows can have a devastating impact on website performance if not properly handled. In this lesson, we'll look at what browser reflows are and how they can be avoided.

Reflow is the name of the web browser process for re-calculating the positions and geometries of elements in the document for the purpose of re-rendering part or all of the document. Because reflow is a user-blocking operation in the browser, it is useful for developers to understand how to improve reflow time and to understand the effects of various document properties (DOM depth, CSS rule efficiency, different types of style changes) on reflow time.

Sometimes, reflowing a single element in the document may require reflowing its parent elements and any elements which follow it.

There are a great variety of user actions and possible ...