Virtual DOMinos: Fast Delivery Guarantee

As I mentioned, I’ve been working in React/Redux lately, and I am continually thrilled by how fast everything renders. This is because of its use of a Virtual DOM, which is super neat.

First off, let’s explain the DOM. The Document Object Model is a W3C standard interface for accessing ‘documents’ (HTML or XML). It defines the way you can represent, store, access various structures on the page. Without some sort of model/API, Javascript would have no idea how to deal with the different elements of a webpage. Since there is a standard, there are a lot of built in methods to access the DOM API, such as document.getElementsbyTagName() or document.getElementbyId(). However, every time the DOM changes, your browser thinks it needs to re-paint the entire page and recalculate the layout/CSS.

So what makes the Virtual DOM different? The virtual DOM is basically a local and simplified clone of all the information in the full DOM. However, when you change something about a Virtual DOM element, it will not immediately change what’s on the web page. Instead, React compares the updated virtual DOM to a snapshot of the virtual DOM just before you made those changes (which is called ‘diffing’). React then intelligently updates the only the objects in the Actual DOM that were noted as changed during the diff.