Dom vs Virtual Dom

DOM (Document Object Model)
  • D = document HTML file
  • O = head, body, title, div, Tags and elements
  • M = Collection and layout or structure of html tags
                      
                        //Example 
                        document // document of html
                        document.head
                        document.title
                        document.body
                        console.log(document.head)
Whenever we run html file in browser the browser engine convert in tree structure that is Real DOM
Virtual DOM
The virtual DOM is “virtual”, representation of a DOM object which is kept in memory and synced with the “real” DOM by a library such as ReactDOM. This process is called reconciliation. It creates copy of DOM then It will make change in copy of DOM then compare the change on copy of DOM then it will refresh real DOM.
The Virtual DOM is light weight abstraction of the DOM.
The virtual DOM is much father than real DOM.
The new Virtual DOM is created after every re-render. The new Virtual DOM can update without affecting the actual DOM.