What is a virtual DOM?
DOM stands for Document Object Model. It is used to represent and manipulate structured elements such as HTML. DOM represents a tree-like structure where each node in the tree corresponds to a component or a tag. The nodes can also have other children elements, such as enclosed HTML tags.
The virtual DOM
Virtual DOM is a technique web development frameworks and libraries, such as React, use to modify the browser's DOM efficiently. The virtual DOM is essentially a lightweight copy of the browser's actual DOM stored in the memory along with the actual DOM.
Note: To get a better understanding of the differences between the Virtual DOM and the real browser's DOM, we can visit the link here.
Role of the virtual DOM
The virtual DOM is used to update the browser's DOM through comparison. Any changes a user makes first happen to the virtual DOM tree, which is then compared against the actual DOM tree, and relevant updates are performed.
This is done to improve the efficiency and performance of web applications by reducing the number of times the actual DOM tree needs to be updated, as without a virtual DOM, every time a user performs a change in the content of the web page, and the whole DOM tree would need to be updated.
Advantages and limitations
The table below shows the advantages and limitations of using the virtual DOM to update the real DOM in our web applications.
Advantages | Limitations |
Better performance as number of updates to the actual DOM are minimized. | Adds a memory overhead due to storing an extra layer of abstraction in the memory. |
Frameworks take care of handling the differences in the actual and Virtual DOMs instead of the developer. | The diffing and patching process uses alot of computational resouces and is very expensive for large trees. |
Virtual DOM frameworks provide powerful tools that can be used for debugging. | When an application is first loaded, a Virtual DOM is created that can lead to increased initial rendering times. |
Example
Now that we have understood the virtual DOM and why it is used, let's look at an example to see how the virtual DOM updates the real DOM.
Consider we have a table with the following fields, "Name" and "City," that contains a record of the different cities where people live. The illustration below shows how the virtual DOM performs updates in the table's entries.
In the illustration, virtual and real DOM trees are first created for the table, with the table contents as the root nodes of the DOM trees.
When the user updates an entry in the table, a new virtual DOM is created, which contains the updates that the user performed.
The new virtual DOM and the old virtual DOM are then compared to evaluate the differences between the two. The differences are the updates that would need to be performed on the real DOM.
When the real DOM is updated, a copy of the updated real DOM is then placed in the memory, replacing the old virtual DOM.
Practice quiz
Now that we have understood what the virtual DOM is, let's try to solve the quiz below to see how much we have learned.
What is the Virtual DOM?
A physical representation of web elements
Lightweight JavaScript library
A virtual representation of the actual DOM.
A database used to store web page contents.
