What is the virtual DOM

Essentially, the Virtual Dom is a JavaScript object that represents the Dom structure as an object. Abstract the page state into the form of JS objects, with different rendering tools, so that cross-platform rendering is possible. Through the transaction processing mechanism, the results of multiple DOM modifications are updated to the page at one time, thus effectively reducing the number of page rendering, reducing the number of DOM modification redrawing and rearrangement, and improving rendering performance.

The virtual DOM is an abstraction of the DOM, and this object is a more lightweight representation of the DOM. For example, Node.js does not have DOM. If you want to implement SSR, you can only use the virtual DOM, because the virtual DOM itself is a JS object. Before the code is rendered to the page, Vue and React convert code into an object (virtual DOM) that describes the actual DOM structure and renders it to the page. The virtual DOM caches a copy of the data each time it changes, and the current virtual DOM is compared to the cached one when it changes.

Both Vue and React encapsulate the DIFF algorithm to compare the changes during rendering (the detailed DIFF algorithm content will be analyzed later), accurately update the changed nodes, and render the unchanged nodes directly through the original data.

In addition, modern front-end frameworks basically require that manual DOM operation is not required. On the one hand, manual DOM operation cannot guarantee the performance of the program. If code review is not strict in multi-person collaborative projects, it is easy to have low performance codes.

Why Virtual DOM

1. Ensure the lower limit of performance to provide relatively good performance without manual optimization

Let’s look at the page rendering process: parse HTML -> generate DOM -> generate CSSOM -> Layout -> Paint -> Compiler

Let’s compare the real DOM manipulation with the Virtual DOM when modifying the DOM to see the performance cost of rearranging and redrawing:

  • Real DOM: Generate HTML string + rebuild all DOM elements
  • Virtual DOM: Generate vNode + DOMdiff + necessary DOM updates

Virtual DOM update DOM preparation takes more time, that is, at the JS level, which is extremely cheap for more DOM manipulation. “The framework gives you the assurance that I can still give you decent performance without you having to manually optimize it,” Utah said in a community forum.

2. The cross-platform

The Virtual DOM is essentially a JavaScript object that can be easily manipulated across platforms, such as server-side rendering, uniApp, and so on.

Is Virtual DOM really better than real DOM

  1. When rendering a large number of DOM for the first time, the innerHTML insert is slower than normal due to the extra layer of virtual DOM computation.
  2. Virtual DOM can ensure the performance of the lower limit, in the real DOM operation can be targeted optimization, at this time is definitely faster, performance will be better.