DEV Community

Discussion on: What is Virtual Dom? And Why is it faster?

Collapse
 
siddharthshyniben profile image
Siddharth

I disagree. Here is an analogy:

Basically, if the browser was your kitchen and your main element a fridge (and your image of the fridge as it would be in five minutes, your virtual DOM), and you bought a lemon, typical render would throw out your fridge, imagine what the fridge with a lemon would look like, buy all the ingredients you had before and also a lemon, then fill the new fridge.

Whereas if you use a VDOM, the VDOM engine figures out that only the lemon has to be added and so only changes that.

If you change only one single element, the change is not not noticeable

Collapse
 
codewithkarthik profile image
Karthik Raja

I am not getting what you disagree.

In this post, I am also explaining the same thing.

What modern frameworks like react does is whenever something is changed in the state/props, a new virtual DOM representation will be created and it will be compared with the previous one. In our example, the only change will be "Apple" to "Pineapple". Since only text is changed instead of replacing whole list.

VDOM figures out which element or part of DOM changed by using reconciliation process and updates only that part.

Collapse
 
siddharthshyniben profile image
Siddharth

I'm sorry I was not clear. I meant I disagree with the fact that VDOM is not faster

Thread Thread
 
codewithkarthik profile image
Karthik Raja • Edited

No, virtual DOM is not faster than the real DOM. Under the hood virtual DOM also uses real DOM to render the page or content. So there is no way that virtual DOM is faster than real dom.

What I meant was you cannot compare apples and oranges. Virtual DOM is not another type of DOM, it is just a representation of DOM. So we should not say Virtual DOM is faster.

React docs state that

The virtual DOM (VDOM) is a programming concept where an ideal, or “virtual”, representation of a UI is kept in memory and synced with the “real” DOM by a library such as ReactDOM. This process is called reconciliation.

Since “virtual DOM” is more of a pattern than a specific technology, people sometimes say it to mean different things.

As you can see above it is a pattern or technique. The reason we should not say that VDOM is faster than actual DOM is because in the end Virtual Dom is going to update the actual DOM.

Thread Thread
 
siddharthshyniben profile image
Siddharth

Yeah, I kind of get your point