In the above diagram, we can clearly see Layout calculation and painting are two crucial steps and further updating this DOM this two-step is performed again which is referred to as repaint and reflow
So let’s understand the repaint and reflow mechanism
Reflow: “Reflow” in the Document Object Model (DOM) refers to the process of calculating the layout of a web page. so whenever we change the content, style, or resize the window reflow mechanism is important to recalculate the position of the node on the webpage.
This process is computationally expensive especially when the layout is more complex.
Repaint: “Repaint” in the Document Object Model (DOM) refers to the process of updating the visual representation of the webpage. Unlike reflow, which involves recalculating the layout of the page, repaint only updates the visual appearance of the affected elements. This process is typically faster than reflow and is often used to optimize performance.
Repaint occurs when any action changes the appearance of the elements that affect visibility but doesn’t change the layout
Let’s understand when will repaint mechanism and when will reflow mechanism will be triggered with examples.
- when we change the CSS property like visibility: none
it will not change the layout of the dom then the repaint mechanism will be triggered but whenever CSS properties like
display: none it triggers the recalculation of the position of the nodes and then the repaint mechanism is triggered. - when we change the font size it changes the geometry of the content so directly it is affecting the layout hence the reflow mechanism will be triggered.
- Adding the node or removing the node from DOM will affect the position of the other nodes so recalculation is necessary so a repaint mechanism will be used.
How to optimize Reflow and Repaint mechanism
- Minimize style changes: Repaints are triggered when the styles of an element change, so minimizing style changes can help reduce the number of repaints. Try to consolidate style changes into a single operation or reduce the frequency of changes.
- Avoid forced reflows: Reflows are triggered when the layout of an element changes, and they can be expensive. Forced reflows occur when the browser needs to recalculate the layout of the entire page. Avoid forcing reflows by batching layout changes, avoid reading layout properties in a loop (using the Document fragment), and use CSS transforms instead of changing the position of an element.
- Reduce the number of nodes: The larger the DOM tree, the more work the browser has to do during layout and painting. Try to reduce the number of nodes in the tree by simplifying the markup, combining similar elements, or removing unnecessary elements.
- Use the will-change property: The
will-changeCSS property can be used to inform the browser that an element is going to change in the future, allowing the browser to optimize the repaint and reflow process. This property can be used to indicate changes in the position, opacity, or transformation of an element.
Angular manages reflows and repaints through its change detection mechanism, When a change occurs in an Angular application, Angular triggers change detection, which initiates a process of evaluating the bindings and updating the view. It also adopts OnPush change detection, which reduces the number of components that need to be checked for changes apart from this it also uses a zone that encapsulates the application and allows it to monitor asynchronous operations such as HTTP requests and timers. The zone ensures that change detection is only triggered when necessary, reducing the number of repaints and reflows.
On the Other hand, React uses virtual DOM to optimize the number of reflows and repaints. React performs a process called reconciliation, which compares the current virtual DOM with the previous virtual DOM and calculates the minimum set of changes required to update the view.
