Virtual Dom vs Real Dom - Side by Side Comparison

I have to confess! I was using React for many years. And I never really understood what is React virtual DOM.

I knew React uses virtual DOM, but I didn't know why. And truth be told, I finished a lot of React websites without this knowledge.

If you're reading this article, there is a good chance you're like me. Or maybe you were at some point.

But now, that's all gonna change. After reading this article, you'll know exactly what is React virtual DOM. And what's the difference between React virtual DOM and the original DOM used by the browser.

Before we jump into the comparison, let's look at each type of DOM separately. Starting with the real DOM.

Overview of DOM

Every page on the internet consists of the Document Object Model (or DOM for short). DOM represents the structure and content of a website in a nested tree pattern.

DOM also allows web pages to identify and manipulate the different components of a webpage.

The Document Object Model is the data representation of the objects that comprise the structure and content of a document on the web. (source: MDN)

The DOM can be used by scripts to modify, navigate and update the content of a webpage. The browser reads XML files and displays them as DOMs, which can then be manipulated by scripts and other programs.

Why Is DOM Inefficient

The original DOM was intended for websites used a couple of years ago. These websites were rendered by the server and they were usually static.

On the other hand, modern websites often use rendering in the browser. But more importantly, modern websites are dynamic.

The content of today's websites is changing whenever a user does something. Everything needs to happen instantly. And for this use case, the original DOM was simply slow.

Virtual DOM was intended to solve this problem. And in my opinion, it certainly did.

Overview of React Virtual DOM

Virtual DOM is a concept created by Facebook. The project is open-sourced and it's maintained by the React team. The React team also provides a library called ReactDOM for using this technology.

You can think of the virtual DOM as a copy of real DOM. It has all the same properties as the real DOM, but it can't display a page in the browser, like the real DOM.

When you have a lot of elements inside your DOM. It's expensive to perform an update using the original DOM. However, with React virtual dom, it's much faster due to the observable pattern.

In React virtual DOM, all the components are listening for a change in their props or state. When this change happens, the virtual DOM is updated. When virtual DOM gets updated, it'll synchronize the changes with the real DOM. And that causes the page in the browser to change.

Virtual DOM is a programming concept where an ideal (virtual) representation of a UI is kept in memory and synced with the real DOM. The synchronization is performed by a library such as ReactDOM. This process is called reconciliation. (source: React)

Handling Updates of Virtual DOM in React

The updates in React can be summarized by a series of following steps:

1. On the first render, both virtual and real DOM is created.
2. Components start listening for changes in any piece of props or state.
3. If the component is affected by a change in props or state happens, it gets rerendered. If not, it won't change.
4. Component rerender causes virtual DOM to change.
5. React compares virtual DOM with the real DOM and updates it if needed.
6. Real DOM is updated and the page is updated in the browser.

Is Virtual DOM Faster Than DOM?

Virtual DOM is just an abstraction of a real DOM and therefore, it can't be faster. However, by using virtual DOM over real DOM, we can identify more quickly, what part of DOM needs to be updated.

Is Shadow DOM the Same as Virtual DOM?

No, they're 2 different things. Virtual DOM is a concept implemented by Javascript which is used to sync virtual DOM and real DOM. On the other hand, shadow DOM is a browser technology used for scoping CSS variables in web components.

Difference Between Virtual DOM vs DOM

Since virtual DOM is only an abstraction over real browser DOM, we can't compare the two. However, we can compare the site that uses virtual DOM with the site that doesn't.

Performance

When it comes to performance, virtual DOM helps a lot. Due to observable pattern, React can recognize what part of the DOM needs to be changed. And it manages to quickly construct an updated version of DOM.

Result: Virtual DOM is more performant than real DOM.

Efficiency

From the developer's point of view, virtual DOM makes it easier and more efficient to write robust web applications. This is backed by the fact that every day, demand for learning React is only increasing. And new developers are usually loving the development experience.

Result: Developers are more productive using Virtual DOM.

CPU and Memory Usage

Virtual DOM adds an additional layer of Javascript to the browser. Because of this fact, virtual DOM makes CPU and memory usage a bit more intensive, compared to native DOM updates.

Result: Virtual DOM makes memory usage higher.

Concluding Thoughts

DOM is an integral part of any website. And knowing how it works is crucial for any web developer.

But for React developers, it doesn't end there. As a React developer, it's also good to know what is virtual DOM. And what's the difference between React virtual DOM and the real DOM.

In this article, you learned why is original DOM inefficient, and how is virtual DOM solving this problem. You also learned the overview of React virtual DOM and its basic overview.

Lastly, we provided you with side by side comparison of the original DOM and virtual DOM.

Now, you should know exactly what is the difference between these two.