DOM Rendering and how React and Angular optimize it - in short.

The Document Object Model (DOM) is an important aspect of modern web development, allowing developers to create dynamic and interactive web pages. However, there is a common misconception that rendering the DOM is always slow. In fact, rendering the DOM itself is generally not slow, rather, it is the re-rendering of the DOM that can cause performance issues.

How browsers work

To understand why re-rendering the DOM can be slow, it is important to understand how the browser renders a web page.

When a browser receives an HTML document, it creates a tree-like structure of elements known as the DOM. Each element is positioned on the screen based on its box model, which is determined by its content, padding, border, and margin. When an element changes, either through JavaScript code or user input it can affect the layout of other elements on the page, leading to a process called reflow.

The layout is the process of calculating the position and size of every element on the page on its first render. Reflow is the process of recalculating the layout it can be slow and expensive, especially when there are many elements on the page or when the change affects the layout of many elements.

Minimize reflow impact

To minimize the impact of reflow, it's best to make changes to the page in batches instead of one at a time. For example, instead of modifying the size of each element on the page individually, modify them as a group using a CSS class.

Minimizing Reflow with React and Angular

In addition, several strategies have been introduced, React and Angular are two popular front-end frameworks both offer features and tools that can help reduce the impact of DOM reflow and rendering on the performance of web applications.

React uses a technique called "virtual DOM" to optimize rendering. which is a lightweight in-memory representation of the actual DOM. Instead of updating the actual DOM on every change, React creates a virtual representation of the DOM and compares it to the previous virtual DOM. It then calculates the minimum number of changes needed to update the real DOM and makes those changes. This reduces the number of reflows and repaints required to update the page and can lead to significant performance improvements.

Angular uses a similar approach to React, with a change detection mechanism that reduces the number of re-renders required to update the page. It uses a zone-based change detection mechanism that automatically detects changes to the page and triggers the necessary updates. Additionally, Angular provides tools such as OnPush change detection that can be used to further optimize performance.

OnPush change detection is a change detection strategy that only triggers updates when the input properties of a component change, further reducing the number of unnecessary re-renders. While the default change detection strategy triggers change detection for all components on every cycle.

Both React and Angular offer features such as lazy loading, code splitting, and server-side rendering that can help to further improve performance. Lazy loading allows parts of the application to be loaded only when they are needed, reducing the initial load time of the page. Code splitting allows the application code to be split into smaller chunks that can be loaded on demand, reducing the amount of code that needs to be loaded initially. Server-side rendering allows the initial HTML to be generated on the server, reducing the time required for the initial page load and improving performance for users with slow or unreliable internet connections.

Conclusion

In conclusion, rendering and reflow are related in that rendering refers to the process of displaying content on a web page, while reflow is the process of recalculating the layout of the page in response to changes. Reflow can be a slow and resource-intensive process, particularly when many elements are involved, which can impact rendering performance. Therefore, to optimize rendering performance, it's important to minimize the impact of reflow by making changes to the page in batches and using techniques such as virtual DOM in frameworks like React and Angular.

Resources