Building Enterprise JavaScript Applications

How Virtual DOM improves performance

HTML is a linear, string representation of the structure of a website/app. The string, in and of itself, conveys no information about hierarchy or structure. For the browser to understand and render the structure represented by the HTML, it parses this HTML and abstracts it into a tree-like representation called the Document Object Model, or DOM. Essentially, the tags in your linear HTML become nodes inside the DOM tree.

However, this parsing is relatively expensive. There are many layers of nesting, and each node has many properties and methods associated with them. So, if your application contains many (nested) components, your end users may notice a delay in the rendering. This is also true for DOM ...