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
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.
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.
I disagree. Here is an analogy:
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
I am not getting what you disagree.
In this post, I am also explaining the same thing.
VDOM figures out which element or part of DOM changed by using reconciliation process and updates only that part.
I'm sorry I was not clear. I meant I disagree with the fact that VDOM is not faster
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
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.
Yeah, I kind of get your point