Difference between Virtual DOM and Real DOM
What is DOM?
DOM stands for Document Object Model it is the structural representation of all nodes in an HTML document DOM represents the Ul of your applications. DOM manipulation is required to dynamically change the content of a web page. DOM is an interface that allows the script to update the content, style, and structure of the document.
- VDOM is the virtual representation of Real DOM
- React update the state changes in Virtual DOM first and then it syncs with Real DOM
- Virtual DOM is just like a blueprint of a machine, can do changes in the blueprint but those changes will not directly apply to the machine.
- Virtual DOM is a programming concept where a virtual representation of a UI is kept in memory synced with “Real DOM ” by a library such as ReactDOM and this process is called reconciliation
- Virtual DOM makes the performance faster, not because the processing itself is done in less time. The reason is the amount of changed information – rather than wasting time on updating the entire page, you can dissect it into small elements and interactions
Methods of DOM:
Now let’s understand the differences between Real Dom and virtual Dom:
|DOM manipulation is very expensive ||DOM manipulation is very easy |
|There is too much memory wastage ||No memory wastage |
|It updates Slow||It updates fast|
|It can directly update HTML||It can’t update HTML directly |
| Creates a new DOM if the element updates.||Update the JSX if the element update |
|It allows us to directly target any specific|
node (HTML element)
|It can produce about 200,000 Virtual DOM|
Nodes / Second.
|It represents the Ul of your application||It is only a virtual representation of the DOM|