How Does The Virtual DOM Help Us Build Faster Web Apps?

The Virtual DOMWeb browsers have what might seem to be a fairly straightforward job to do. They take a set of HTML and CSS files and render a document according to the structure and content of those files. Additionally, they can make changes to the document by running JavaScript files. In reality, rendering pages is extraordinarily complex and there is a multitude of steps between receiving files from a server and the finished product appearing on the user’s screen.

I’d like to take a look at one of those steps: the building and manipulation of the DOM: the Document Object Model. Anyone with a bit of JavaScript experience will be familiar with the DOM. Essentially, the DOM is a representation of a structured document that uses objects to stand for the elements on the page. Those objects are organized into a tree structure with nodes on the branches. The DOM is (supposed to be) a standard browser-independent representation of a document. Because it’s standard, we can use tools like JavaScript and CSS to interact with and modify the DOM. That’s more or less what JavaScript, CSS, and libraries like jQuery do: they allow us to manipulate the DOM so that we can influence what appears in the user’s browser.

With these tools we can build interactive web applications that change according user action, input, and whatever else the web developer wants to implement. But there’s a problem. The DOM was never designed to be used in this way. It was developed in the days when most sites were static and the DOM had to be built a once or a small number of times. It isn’t well optimized for dealing with changes, even though browser manufacturers have introduced numerous optimizations over the years.

Manipulating the DOM is slow, especially for complex web applications. Consider the average Facebook page. After a few minutes of scrolling, the DOM can have 17,000 nodes. Updating such a large tree every time a change on the page is needed is computationally intensive and slow.

The virtual DOM is an abstraction from the standard DOM, often called the plain old DOM, and is used by tools like Facebook’s React.js. Instead of working directly with the DOM or manipulating it with tools like jQuery, the virtual DOM allows developers to work on a simpler and faster abstraction. Updates to the virtual DOM are only applied to the standard DOM at the last possible minute, avoiding the need to take the performance hit that comes with updating the standard DOM.

How this works in practice is quite complex, but the basics are well summarized by Jack Bishop:

“By diffing the before and after chunks of custom, framework-defined component objects, and only writing changes to DOM when absolutely necessary, the virtual DOM approach has proven to be a viable method for increasing not only performance, but maintainability as well.”

React is one of a new breed of tools allows for the building of complex web applications that perform significantly better than their DOM-manipulating forbears. And because the virtual DOM is simpler than the standard DOM, it makes it easier to write and maintain code that interfaces with it.

So do you need to use React and the virtual DOM? It’s certainly worth looking into if you’re building complex web-based user interfaces and value the best possible performance. For simpler interfaces and static sites, JavaScript and jQuery are probably more than adequate.

Matthew Davis is a technical writer and Linux geek for Future Hosting.

Dedicated Server Special

Take advantage of our Double RAM offer on the E3-1230v2 4 x 3.30GHz+HT server! Only $134.95 per month. Managed and Unmanaged options available at checkout.