The difference between DOM and Virtual DOM

In this article, we will try to find out what is DOM and its problems. What is Virtual DOM, and explain how it solved the problems of the real DOM.

Intro

The creation of React by Facebook developers introduces a new term, virtual DOM. Virtual DOM plays a major role in drastically improving the performance of applications created using this library. In the following text, we will define both the virtual and the real DOM and explain how the virtual DOM solved the problems of the real DOM.

What is DOM

Just to get things straight - DOM stands for Document Object Model and is an abstraction of a structured text. It takes HTML elements and wraps them in an object with a tree structure — maintaining the parent/child relationships of those nested HTML elements.
The HTML DOM provides an interface (API) to traverse and modify the nodes in a number of ways — such as adding nodes, removing nodes, editing a node’s content, etc. It contains methods like getElementById or removeChild. We usually use JavaScript language to work with the DOM.
Any manipulation of certain elements inside it causes complete re-render. With more and more complex web applications these complete renders of real DOM are very costly, causing applications to have slow performance.

Problem With DOM

DOM manipulation is the heart of the modern, interactive web. But unfortunately, it is also a lot slower than most JavaScript operations.
As mentioned above the HTML DOM is always tree-structured - which is allowed by the structure of the HTML document. This is great because we can traverse trees fairly easily. Unfortunately, easily doesn’t mean quickly here. This slowness is made worse by the fact that most JavaScript frameworks update the DOM much more than they have to.
Nowadays The DOM trees are huge. it’s common to have a thousand nodes in a single SPA (Single Page Applications - SPAs). Since we are more and more pushed towards dynamic web apps, we need to modify the DOM tree incessantly and a lot. Inefficient updating like repainting the whole page for each change is very very expensive And this is a real performance and development pain.

And this is exactly where the Virtual DOM comes into action.

What is Virtual DOM

The Virtual DOM is a lightweight abstraction of the real DOM. You can think of it as a copy of the DOM, that can be updated without affecting the actual DOM.
It consists of two copies of real DOM represented as tree structures. One copy is an exact replica of real DOM and stays that way while the other copy changes as manipulation with certain elements happen. At that moment the two compare and the change between them is extracted. Extracted change is then implemented inside real DOM without it having to completely re-render. After successful implementation, there are again two exact replicas. When manipulation with a certain element happens again the process is repeated.
It has all the same properties as the real DOM object but doesn’t have the ability to write to the screen like the real DOM. The virtual DOM gains its speed and efficiency from the fact that it’s lightweight. In fact, a new virtual DOM is created after every re-render.

To Keep Real and Virtual DOM in sync a process called Reconciliation is used. Diffing algorithm is a technique of reconciliation that is used by React.

How Does it solve the problem?

When you render an element in virtual DOM, every single virtual DOM object gets updated.
This sounds incredibly inefficient, but the cost is insignificant because the virtual DOM can update so quickly.
Once the virtual DOM has been updated, then React compares the virtual DOM with a virtual DOM snapshot that was taken right before the update.
By comparing the new virtual DOM with a pre-update version, React figures out exactly which virtual DOM objects have changed. This process is called “diffing.”
Once React knows which virtual DOM objects have changed, then React updates those objects, and only those objects, on the real DOM. In our example from earlier, React would be smart enough to rebuild your one checked-off list item and leave the rest of your list alone.
This makes a big difference! React can update only the necessary parts of the DOM. React’s reputation for performance comes largely from this innovation.

In summary, here’s what happens when you try to update the DOM in React:

1. The entire virtual DOM gets updated.
2. The virtual DOM gets compared to what it looked like before you updated it. React figures out which objects have changed.
3. The changed objects, and the changed objects only, get updated on the real DOM.
4. Changes in the real DOM cause the screen to change.

Conclusion

The creation of Virtual DOM solved real DOM’s low performance and slow re-render. It enabled web applications to be more complex and more interactive for users without having to sacrifice so much performance.