Skip to content
Related Articles

Related Articles

Difference between Virtual DOM and Real DOM

Improve Article
Save Article
  • Difficulty Level : Easy
  • Last Updated : 18 Oct, 2022
Improve Article
Save Article

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.

Real DOM

The DOM represents the web page often called a document with a logical tree and each  branch of the tree ends in a node and each node contains object programmers can modify the content of the document using a scripting language like javascript and the changes and updates to the dom are fast because of its tree-like structure but after changes, the updated element and its children have to be re-rendered to update the application UI so the  re-rendering of the UI which make the dom slow all the UI components you need to be rendered for every dom update so real dom would render  the entire list and not only those item that receives the update 

Example:

 

Virtual DOM

  • 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 the 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

Example:

 

Methods of DOM:

  • write(“string”): Writes in document area
  • writeln(“string”): Writes in new line in document area
  • getElementById(“id”): Returns the element with passed ID
  • getElementByName(” name” ): Returns the element with passed name
  • getElementByTagName(“tagname”): Returns the element with the passed tag name
  • getElementByClassName(“classname”): Returns the element with passed class name

 Now let’s understand the differences between Real Dom and virtual Dom:

Real DOM

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
My Personal Notes arrow_drop_up
Related Articles

Start Your Coding Journey Now!