What is DOM reflow ?

In this article, we will learn about DOM (Document Object Model) reflow. The Document Object Model (DOM) is a programming interface for HTML (HyperText Markup Language) and XML (Extensible markup language) documents. It defines the logical structure of documents and the way a document is accessed and manipulated.

What is reflow?

The reflow of an element recomputes the dimension and position of the webpage. It also affects the HTML element’s children, ancestors, and elements that appear after it in the DOM. Reflowing is not good for the webpage but it can be tackled very easily.

Reflow occurs by doing the below-mentioned task:

• When you insert, remove, or update an element in the DOM.
• When you modify content on the page, e.g. the text in an input box.
• When you move a DOM element.
• When you animate a DOM element.
• When you take measurements of an element such as HTML DOM offsetHeight or JavaScript getComputedStyle() method.
• When you change a CSS style.
• When you change the class name of an element.
• When you add or remove a stylesheet.
• When you resize the window.
• When you scroll through the webpage.
• When you change the font.
• When you activate CSS pseudo-classes such as :hover.
• When you set a property of the style attribute.

To minimize the DOM reflow you can do the following task:

• You should avoid setting multiple inline styles and avoid setting styles individually.
• You should use class names of elements, and do so as low in the DOM tree as possible.
• Before adding a new style you can detach that element from the DOM and then again put it back into the DOM.
• You should avoid computing styles too often.
• You should apply animations with position fixed or absolute.
• You should always stay away from table layouts, they trigger more reflows than block layouts because multiple passes must be made over the elements.
• You should create a table of fixed size.
• You should change classes on the element you wish to style.
• You should set the table layout fixed.

Example 1: In the below code, we will make use of the  CSS "display: none" property to demonstrate the reflow.

Output:

👁 Image

DOM Tree: This tree represents this HTML document basically has one node for each tag and one text node for each piece of text between nodes.

👁 Image

Render Tree: This tree represents the visual part of the DOM tree and some elements are missing in the visual part.

👁 Image

Example 2: In the below code, we will change the dimension of the font. If you change any dimension inside the HTML page.

Output:

👁 Image