What is the virtual DOM, why do you use it, and what are the drawbacks of the traditional DOM

What is the virtual DOM? JavaScript objects are used to represent the DOM information and structure. After updating, the DOM is kept in sync with the real DOM.

Why you should use the virtual DOM: DOM manipulation is slow, and even minor manipulation can result in page rearrangement, which can be very costly. Js objects are faster and simpler to process than DOM objects. The diff algorithm is used to compare the differences between the old and new VDOM, so that DOM operations can be performed in batches and minimized, thus improving performance

• Explanation:

Traditional DOM rendering processes

This is very performance expensive, because I’m just creating a div and I have a lot of property values,

var div = document.createElement('div')
var str = ''
for (var key in div) {
    str += ' ' + key
}
console.log(str)
Copy the code

why? DOM manipulation is slow, and even minor manipulation can cause pages to be reformatted, which can be very costly. Js objects are faster and simpler to process than DOM objects. The diff algorithm is used to compare the differences between the old and new VDOM, so that DOM operations can be performed in batches and minimized, thus improving performance.

How is it different from the virtual DOM in VUE

In vUE, two arrays are compared; React is a comparison between two linked lists;