Virtual DOM vs. real DOM

First, look at the problems with the real DOM:

1. DOM misoperations will cause forced DOM synchronization

It is time consuming to rearrange and redraw the DOM when synchronization is initiated.

For example, by creating a new LI node in a UL and adding it to it, and then immediately fetching ul’s offsetHeight, the rendering process will force the rendering.

let main_div = document.getElementById("mian_div") let new_node = document.createElement("li") let textnode = document.createTextNode("time.geekbang") new_node.appendChild(textnode); document.getElementById("mian_div").appendChild(new_node); Console. log(main_div.offsetheight) {console.log(main_div.offsetheight);Copy the code

Vue and React introduced the virtual DOM to address these issues

Virtual DOM is used to solve the following problems:

1. Apply the changes to the virtual DOM

2. It saves time to adjust the virtual DOM, because the virtual node is a JS object. Compared with the real DOM, the operation is more convenient and light, the real DOM is relatively large, and the rendering process takes time to re-shoot rendering.

3. The virtual DOM collects enough changes to save time by applying them to the real DOM at once. If forced synchronization like the one mentioned above is very time consuming, we can save a lot of time by rendering once.

Specific virtual DOM and real comparison will involve vUE related principles, if learned later to record.

Reference:

Time.geekbang.org/column/arti…