drBrowser Reflow and Repaint

As technical professionals, we make?use of a number of functions to get a?positive and expected result. The same process is applicable in creating or adding?visual interactions that we see in a browser. Among the various functions, “Repaint” is a concept that we use frequently?to make big and small alterations on the web page. However, many of us do not know?about the role of Reflow in a browser especially its merits and demerits.?A clear understanding on how both the functions work, would help to increase the performance of the web page specifically with the purpose of scrolling. If you are into a project on developing a highly responsive web application, a thorough knowledge on both the concepts will have many benefits.

Reflow

In order to re- render a partial or full document, we get the help of Reflow, which does the calculation of positions and geometry of html elements. In fact, Reflow is a blocking operation. It can indirectly slow down the JavaScript execution which affects the performance of the web page.

Let’s look at scenarios where the Reflow function gets triggered. When we try to resize the browser window or when we keep on adding and removing elements from DOM or we change element classes Reflow gets initiated. This occurs even when we try out different computed styles.

Repaint

Repaint gets activated/enabled when changes are made into the visual effects, the look and feel of the web page; for example, to change the color of any element and there makes no difference in the layout. The process is heavy as the browser needs to check visibility of all nodes and this makes repaint expensive.

There are certain elements that causes repaint namely, Opacity, Background- color, Visibility and Outline.

?Repaint as well as Reflow are blocking operations. On comparison, Reflow is costlier than repaint, as it includes recalculation of positions and dimensions of every element, that results in the re-rendering of partial or full document.

?How well?can you reduce the number of Reflows?

• It is always better to reduce unnecessary DOM depth. When a change is made in any one of the elements in the DOM tree, each and every level of the tree- all the way up to the root and all the way down to the children of the modified node. This in turn takes more time affecting the entire performance of the page.
• Remove unused CS rules and CSS rules need to be minimized.
• Don’t use reflow function to make complex rendering changes such as animations and visual interactions. Use position- absolute or position-fixed instead.
• Usage of complex CSS selectors specifically descendant selectors can be avoided as it requires more CPU power to do selector matching.?