Comparison of Real DOM and Virtual DOM

• DOM - Document Object Model
• When a webpage loads browser converts html page into tree like structure is Called Dom => COMPARISON OF REAL DOM VS VIRTUAL DOM

*1. Real Dom *

• A DOM created by browser is called Real DOM

• It directly uploads the webpage

  • Actual Browser Dom
  • Re Render full part
  • Slow updates
  • Manipulation is expensive
  • Can update HTML directly

(e.g)

HTML
 <h1> welcome </h1>

JAVASCRIPT
document.query selector("h1").
 innerText="welcome";

DEMERITS OF REAL DOM

• It's Expensive
• Slower in process
• It affects perfomance

2. Virtual Dom

• It is nothing but a lightweight copy of Real dom
• React plays a major role in virtual dom

• React creates a virtual version in
  Memory

  • Copy of real dom
  • Faster updates
  • Updates only changed parts
  • Compares changes first
  • Manipulation is easy and Not expensive
  • Can't update HTML directly

How virtual dom works

1.Render

• When state change React creates a new Virtual DOM tree

2.Diffing

• React compares the new Virtual DOM With old virtual DOM

3.Reconciliation

• Only the parts that actually changed get updated in the Real DOM (TBD)

Why react using virtual dom ?

• To improve performance of web application ,when app's state changes it create new representation of UI And virtual dom only compares with previous one by diffing .

1.Faster Re-render
2.Smoother UI
3.Efficient memory