The Virtual DOM vs The DOM

Virtual DOM was popularized by Facebook’s React framework. Here’s what it is, how it works, and what its implications are. So, why do we need the virtual DOM?

What’s wrong with the DOM…

The DOM is implemented in the browser and holds the representation of your application UI. Every time the state of our UI changes, the DOM is updated to represent that change. However, manipulating the DOM can be painfully slow.

Even just reading from the DOM can cause unwanted side effects in our applications. Modern day applications tend to be dynamic and need to be able to handle change efficiently.

Enter the virtual DOM

The virtual DOM is a virtual representation of the DOM that our application builds. Whenever the state of our application changes the virtual DOM gets updated rather then the browser’s DOM. The virtual DOM then figures out the most efficient way to update the browser’s DOM.
So, at first glance you may be thinking this sounds like a lot of extra work being done behind the scenes. How can this possibly be faster than just manually updating the browser’s DOM?

Let’s break down how the virtual DOM works in order to see how it can provide updates to the browser’s DOM faster than manually manipulating the DOM.

Virtual DOM breakdown

When we add elements to the UI a virtual DOM or virtual tree is created to represent our element. Each element is just a node on our tree, and if the state of any of those elements changes, a new virtual tree is created and diffed with the previous virtual tree.

Next, the virtual DOM module calculates the best way to make these changes on the real DOM. This is where the virtual DOM beats out the browser DOM. The minimal set of DOM operations is computed and batched together so that we can find the most efficient way to update the browser DOM.

The image below shows a visual representation of diffing the virtual trees.

Virtual DOM Diagram

The yellow circles represent ‘dirty’ nodes. Dirty nodes are nodes that have had their state changed, and when diffed with the old virtual tree all dirty nodes and their whole parent subtree get re-rendered to give the updated UI. This updated tree will be used to patch the browser’s DOM.

Implications

The virtual DOM allows for faster and easier to reason about applications, but it also has some even greater implications. The virtual DOM is excellent for cross-browser issues, because our applications no longer have to deal with the DOM themselves.

Instead, we create a representation of our application in the virtual DOM, and let it handle the communication with the browser’s DOM. Now that we are free from the DOM we can build applications using web technologies without a browser! We can do things like render our virtual DOM on the server or even HTML canvas.

A great example of using the virtual DOM to build native applications is Facebook’s React Native framework. I will cover more on this topic in future posts as the virtual DOM and React progress.

To learn more about the virtual DOM and how it is implemented in React check out this video.

More Posts by Jarrod Rotolo: