What is the Virtual DOM?

If you use libraries like React, Preact or even VueJS, then you're using a virtual DOM (perhaps without knowing it).

But what is it for, how does it improve performance in a web application, and what are the alternatives!

That's what we'll explore together in this article!

Let's start with the DOM

Before talking about the Virtual DOM, let's recall what the DOM itself is.

The DOM (Document Object Model) is a representation of the HTML page by the browser, in the form of a tree of elements (tags and text nodes).

Each element, each attribute, becomes an object that JavaScript can manipulate.

Modifying the DOM in JavaScript therefore means acting directly on this structure: adding an element, changing a class, removing a node… But these operations are costly.

Each change requires the browser to:

• recalculate the layout (reflow)
• redraw the screen (repaint)
• restart animations or CSS.

Updates that are too frequent

When an application becomes complex (frequent interactions, numerous components, dynamic data…), DOM updates multiply.

And modifying the DOM at every small state change has an impact on performance.

This can create slowdowns and make the interface choppy. Fortunately, we have the Virtual DOM.

A virtual copy of the DOM

The Virtual DOM is a virtual copy (in memory) of the real DOM.

When a state change occurs in our application (React or Vue), such as a user click, here's what happens:

1. A new virtual tree representing the new state of the interface is generated in memory.
2. We compare this tree with the previous one (called "diffing").
3. We calculate the minimum changes needed to apply to the real DOM.
4. We execute these changes in a grouped and optimized way.

This process is called reconciliation, and it's what makes the Virtual DOM performant.

An analogy to better understand

Imagine a designer who has to update a printed document.

There's a paper version (the real DOM), and a digital version (the Virtual DOM). Rather than reprinting the whole document for every small modification, we compare the two versions, make all the changes, and only reprint the pages that were modified.