DOM | Virtual DOM | Incremental DOM

What is the DOM?

The webpage is simply a document. The DOM (Document Object Model) represents that documents in objects and nodes.

The DOM is a tree-like data structure that comes into existence once an HTML document has been parsed by the browser.

It is a programming interface for HTML and XML documents.

The browser paints the DOM to the screen and will repaint it in response to user actions (e.g. mouse clicks) and updates via its API from your Javascript scripts

• E.g. document.createElement.

When we use Javascript to make a change to our page or in other words when we manipulate the dom using javascript, the browser has to do some work to find the required DOM nodes and make the change

• E.g. Add a new list item to a list.

There can be thousands of nodes in the DOM in modern apps, so updates can be computationally expensive. Small, frequent updates will inevitably slow the page down.

Therefore searching and updating the DOM is a huge bottleneck in web application performance. This is the main reason to come up with the concept of Virtual DOM (VDOM).

Virtual DOM

Virtual DOM is a way of representing the actual DOM of a webpage with Javascript objects. Given any HTML element, we can create a virtual node to represent that in javascript.

The virtual DOM idea became more popular with React which is a library originally introduced by Facebook. Now virtual DOM is using by many frontend frameworks and libraries like React, Vue, Elm.

Why the Virtual DOM concept is important?

DirtyChecking and watchers

Let’s discuss the dirty checking with good old AngularJs.

For an expression like {{foo.x}}, Angular not only renders that data but also creates a watcher for that particular value. Whenever anything happens in our app (click event, HTTP response, timeout), all the watchers are run. If the value in a watcher has changed then that value is re-rendered in the UI. By running all the watchers AngularJS is essentially finding out where it needs to make the changes. The process of running these watchers is called dirty checking. At a point, this becomes really heavy and resource-consuming. If we take an example like showing lots of real-time streaming data on a webpage this is not the best solution. Therefore libraries like React and frameworks like Vue take a different approach.

Different Approach to reflect the changes in UI

Whenever there is a state change in a React or Vue component, instead of finding out where to make the changes (like AngularJS), React or Vue re-renders the entire UI from scratch with the updated state.

But this approach has a problem. To re-render the entire UI means to re-render the entire DOM tree. This is a problem because DOM update is a slow process due to reflow and repainting.

Virtual DOM was introduced as a solution for this.

• It’s asynchronous. It’s not done in terms of frame rates.
• It’s done when there are updates to handle and the program allows an async operation.
• The rate would be limited by the hardware
• Whenever a data change is observed, it will open a queue and buffer all the data changes that happen in the same event loop
• If the same watcher is triggered multiple times, it will be pushed into the queue only once

Advantage of having a virtual DOM

It is really fast

As you may already know VDOM is really fast in reflects the changes in UI and also it is less resource-consuming. But it is not fast because it is only updating the changed part in the DOM without updating the entire DOM. HTML DOM API and Modern browsers are capable of detecting the changed element and only update it.

Creating JS objects is much cheaper than manipulating DOM. When several changes happen Vue creates a separate virtual DOM object for each and then compares each other with a virtual DOM object which has no changes. This comparing mechanism is called diffing.

Then as asynchronous operations, this change (set of changes) is painted in the DOM. In this case, only the result of the changes is painted to the DOM at once. This process is called ‘batching’.

Native environment support.

We can create the same app running virtually in any environment that supports JavaScript, but it doesn’t necessarily have to touch the DOM. Instead, it can talk to a native rendering engine, for example, iOS or Android. Or on the server side, we can turn the virtual DOM into strings or a string finder. Using this way it is easy to get native support. (ex: react-native)

Programmatic easiness / Using Render functions

We could create factory-style functions to build your virtual nodes using Javascript’s array methods etc, something that would be more difficult using template syntax.

JSX: Render functions allow JS extensions like JSX which may be desirable for architecting a component-based app.

VDOM vs Incremental DOM

Incremental DOM is a slightly different concept introduced by Google to overcome some limitations in virtual DOM.

Virtual dom compares (diff) a new entire virtual DOM with the previous virtual DOM for changes then applies those changes to the actual DOM. — This approach creates a new virtual DOM to determine the changes and it is memory heavy.

Incremental DOM has one virtual DOM and walks along the tree to find changes then mutates the virtual DOM and then applies those changes to the actual DOM — (reduced memory size and garbage collection).

Even though Virtual DOM creates a whole tree from scratch every time you rerender, incremental DOM doesn’t need any memory to re-render the view if it doesn’t change the DOM. We only have to allocate the memory when the DOM nodes are added or removed. And the size of the allocation is proportional to the size of the DOM change.