This article will explore the differences between Real DOM and Virtual DOM in web development.
Document Object Model (DOM) is a tree-like structure that represents the HTML elements of a web page. Real DOM is a programming interface for web documents, while Virtual DOM is a lightweight copy that updates only corresponding nodes upon any property change. This approach improves the performance of web applications by reducing unnecessary updates to the actual DOM. Read on to learn more about how using Virtual DOM can enhance the performance of your web app.
What is Real DOM
The Document Object Model (DOM) is the data representation of the objects that comprise the structure and content of a document on the web. The image above, is the actual tree structure of the DOM, having its Document as the parent node, with preceding child elements HTML which is the markup language. The HTML element also has its child elements known as Head and Body. The Head element includes everything about the web page, such as the Title, Description, Meta tags and etc. These tags are not shown on the page but are used to determine the information on the web page and how browsers will interpret the content. The Body element is the actual elements displayed on the web page, having its children as H1, H2, ... H6, p and etc. This is the content a user will see and interact with on the page.
Virtual DOM
Virtual DOM according to the official React docs, "The virtual DOM (VDOM) is a programming concept where an ideal, or “virtual”, representation of a UI is kept in memory and synced with the “real” DOM by a library such as ReactDOM. This process is called reconciliation".
This means that React creates a lightweight copy of the real DOM, and keeps it in memory, then upon any node change, React uses a library called ReactDOM to compare the VDOM and Patches (updates) of the real DOM in the process called reconciliation
The process of updating in React
The ReactDOM.render() renders the elements on the screen on the first load by creating the real and virtual DOM trees.
Any change to an element (such as a button click) leads to a notification sent to the virtual nodes for a state change. If any property of the node is altered, it updates itself.
React compares the updated virtual DOM with the real DOM and updates the real DOM accordingly. This process is known as reconciliation. This is done using a heuristic algorithm known as the Diffing Algorithm.
The updated real DOM is rendered on the screen.
Visualize Virtual and Real DOM re-renders
The gifs below illustrate how Real DOM & Virtual DOM handles re-renders. In the first image, I have just included two separate containers, one with the Real DOM elements and the second with the Virtual DOM elements. Just a simple HTML Input field and a p element with a time object.
As the time object updates every second the Real DOM re-renders the whole page to display the changes, (see the second gif for a clearer view and understanding). This will lead to a decrease in performance, especially in large web applications with numerous elements.
This is where the Virtual DOM approach comes into play, as it reduces unnecessary updates and improves performance, by only updating the altered element. The gif also demonstrates that when the time object changes every second, React only updates the p element with the new time value and does not re-render the parent node.
Benefits of Virtual DOM over Real DOM
There are lots of benefits of only re-rendering only the nodes in the Tree that have been modified in the state of your application.
Good UX: When it comes to building scalable applications, UX is the first approach to consider. When a button is clicked to fetch some data from API, React will only update the node that needs to display the data, so other state changes of the App won't be lost.
Performance: With the current 5G network bandwidth, a web app should be able to deliver content very fast, so Virtual DOM helps increase the app's performance.
Stability: Applications that often re-render tend to crash too often, which leads to money lost and customer dissatisfaction. While re-rendering what has been modified helps reduce this factor.
Summary
Document Object Model (DOM) is a tree-like structure that represents the HTML elements of a web page.
The virtual DOM (VDOM) is a programming concept where an ideal, or “virtual”, representation of a UI is kept in memory and synced with the “real” DOM by a library such as ReactDOM. This process is called reconciliation.
The ReactDOM.render() renders the elements on the screen on the first load by creating the real and virtual DOM trees. Any change in the state of the application triggers a patch to update the DOM with new information, without re-rendering the entire app.
Thanks for reaching the end, drop your thoughts in the comment section. Follow me for more blog posts.
I'm Prince Azubuike a frontend developer by day and a technical writer by night, who loves breaking down complex topics through writing.