By admin/development, javascript/March 31, 2016

VIRTUAL DOM

If you are using React, there is a better chance you have heard about virtual DOM. In a nutshell, virtual DOM is an abstract version of the DOM, a lightweight copy of the actual DOM which we can manipulate the way we want and then apply to the DOM tree.

This approach is faster than working with the actual DOM, because changing elements of the DOM tree affects the performance.

Before getting deep into Virtual DOM, let's investigate the problems with touching DOM directly.

Problems with DOM

One of the biggest issues with the DOM is it isn't designed for complex and dynamic web pages. The web has evolved to a degree, where having over thousands of nodes on one page has become quite the norm. Take Facebook and Twitter for example. The unlimited amounts of posts on a single page can bring in thousands of nodes easily. Manipulating these nodes, can takes seconds.

Browsing on mobile also amplifies this problem. Mobiles phones have slower processors and the slowness of DOM manipulation can be well pronounced.

On top of virtual DOM, you might have heard of shadow DOM as well. This can get confusing, so let's clear things up.

Standard DOM

The browser DOM or the W3C standard Document Object Model. When a web page is loaded, the web browser creates a DOM of the page which is constructed as a tree of Objects.

The Document Object Model (DOM) is a programming interface for HTML and XML documents. It provides a structured representation of the document and it defines a way that the structure can be accessed from programs so that they can change the document structure, style and content. - MDN

Shadow DOM

W3C is working on a draft standard called shadow DOM. It provides much-needed encapsulation for web components, of its CSS, JavaScript and templating.

A document tree is a node tree [ DOM ] whose root node is a document. Any element can host zero or one associated node trees, called a shadow tree . A shadow host is an element that hosts one shadow tree. A shadow tree has an associated flag, called an encapsulation mode , which is either open or closed. - MDN

One of the issues shadow DOM is trying resolve is separating itself from the main content it resides, by stopping CSS leaking into main content.

<html>
  <head></head>
  <body>
    <p id="host">
    <script>
      var shadow = document.querySelector('#host').createShadowRoot();
      shadow.innerHTML = 'Hello Shadow DOM!';
      shadow.innerHTML += '<style>p { color: green; }</style>';
    </script>
  </body>
</html>

In this example we are attaching the shadow DOM using createShadowRoot() to the paragraph element. And then we assign some styles to it.

The shadow DOM should always be attached to an existing element.

The shadow DOM will only start to be displayed when we assign the paragraph element with content.

Virtual DOM

There is no standard for virtual DOM. But it does the rendering more efficiently by monitoring the changes, making the calculations on the memory and then the final result will be applied to the DOM.

The monitoring of data changes related to DOM is monitored in one of two ways:

Dirty checking - Detect changes to the data by continuously polling at regular intervals
Observable - A state change will trigger an update for only affected nodes as described below.

The mechanism for updating DOM uses the following methods:

Batch DOM read/writes
Fast diff algorithms
Sub-tree only updates

The methods described above are complex to implement but one of the most popular libraries doing this is React.

By batching DOM updates using functional programming, by diffing before and after chunks of framework based custom components, and only updating changes when necessary, virtual DOM increases the maintainability as well as performance.

Conclusion