subash

Posted on May 19

What is browser, DOM, Real DOM, Virtual DOM

#html #javascript #webdev #beginners

1.WHAT IS BROWSER?

A browser is software used to access and display websites on the internet.

2.What is DOM?

DOM - Document Object Model
The browser converts HTML into a tree-like structure called the DOM.

Example HTML:

<body>
  <h1>Hello</h1>
  <p>Welcome</p>
</body>

DOM Structure

Body
 ├── h1
 │    └── Hello
 └── p
      └── Welcome

What is Real DOM?

The Real DOM is the actual DOM created inside the browser.

It directly represents the webpage shown to the user.

DOM is created by browser, not by the browser javascript.

1.When the browser reads HTML:

<h1>Hello</h1>

the browser automatically converts it into a DOM structure internally.

Document

   └── h1
        └── "Hello"

JavaScript does not create the DOM from scratch.
JavaScript only:

*accesses the DOM
*modifies the DOM
*updates the DOM

Problems with Real DOM

Updating the Real DOM is slow because:

*The browser must recalculate layout
*Repaint the UI
*Re-render elements
If many updates happen frequently, performance becomes slower.

Especially in:

*Large applications
*Dynamic websites
*Real-time updates

virtual DOM;

The Virtual DOM is a lightweight copy of the Real DOM.
Libraries like React use Virtual DOM to improve performance.

Instead of updating the Real DOM directly:
1.React creates a Virtual DOM copy
2.Changes are made in the Virtual DOM first
3.React compares old and new Virtual DOM
4.Only changed parts are updated in the Real DOM.

This process is called Diffing.

and updating only necessary parts is called Reconciliation

Virtual DOM Working Flow;

User Action
↓
State Changes
↓
New Virtual DOM Created
↓
Compare with Old Virtual DOM
↓
Find Differences
↓
Update Only Changed Elements in Real DOM.

What is New Virtual DOM?

When data changes in React:

1.React creates another updated Virtual DOM
2.This updated version is called the New Virtual DOM

Then React compares:

Old Virtual DOM

    VS

New Virtual DOM

Why React Uses Virtual DOM

 1. Faster rendering

 2.Better performance

 3.Efficient updates

 4.Smooth user experience

 5.Easier UI management

Real DOM vs Virtual DOM

Feature	Real DOM	Virtual DOM
Speed	Slower	Faster
Updates	Updates entire structure	Updates only changed parts
Performance	Less efficient	More efficient
Memory Usage	Higher	Lightweight
User Experience	Can become slow	Smooth UI updates

The browser creates the Real DOM from HTML.
Directly updating the Real DOM can be slow.

To solve this problem, React introduced the Virtual DOM, which acts as a lightweight copy of the Real DOM.

Whenever data changes:

A New Virtual DOM is created
React compares old and new Virtual DOMs
Only necessary changes update the Real DOM

DEV Community