Native DOM vs. virtual DOM

• First , We need to figure out two concepts , What is primordial dom, What is virtual dom?
• Traditional development model
• Native JS or JS operation DOM when , The browser will build DOM The tree starts the process from the beginning to the end .
• In one operation , I need to update 10 individual DOM node , The browser receives the first DOM I didn't know there was 9 Update operations , So the process will be executed immediately , Final execution 10 Time .
• fictitious DOM
• Web The interface consists of DOM Trees ( Tree means data structure ) To build , When part of it changes , In fact, it corresponds to a DOM The node has changed .
• In one operation 10 Secondary update DOM The action of , fictitious DOM No immediate action DOM, It's about putting 10 Updated diff Save the content to a local JS In the object , In the end JS Object one time attch To DOM on the tree , Follow up , Avoid a lot of unnecessary calculations .
• fictitious DOM The benefits of
• use JS Object simulation DOM The benefits of nodes are , The update of the page can be reflected in JS object ( fictitious DOM) On , Operate... In memory JS Objects are obviously faster , After the update is completed , And finally JS Objects are mapped to real DOM, It's up to the browser to draw .