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 Facebook.com, 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.