While it sounds like something from a sci-fi, its main purpose is to increase the speed and efficiency of DOM updates. It offers some additional benefits as well.
Reminding ourselves what the DOM actually is
We tend think of the DOM as the HTML document it represents. But actually the DOM is a tree-like data structure that comes into existence once an HTML document has been parsed by the browser.
It’s expensive to update the DOM
// #myId could be anywhere in the document, which may have thousands of nodes! document.getElementById('myId').appendChild(myNewNode);
In modern apps there can be thousands of nodes in the DOM, and so updates can be computationally expensive. It’s inevitable that small, frequent updates will slow the page down.
What is a virtual DOM?