Virtual DOM vs DOM (Real DOM)

What are they?

First, this is an example of DOM

The DOM is actually the object-based abstraction of your code which is being shown on the page!

DOM (Real/Browser DOM)

DOM takes all the HTML elements and wraps them in an object with a tree-structure — like the above image. This provides an API that allows us to directly target any specific node (HTML element) and do what we want like adding more child/parent nodes, removing, editing its content, and blah blah blah...

Virtual DOM

On the other hand, Virtual DOM is an abstraction of your Real DOM but it’s pretty light-weight than the Real DOM — It has all the same properties as the Real DOM object but it can’t write and show things to the screen like real DOM. It’s extremely fast as compared to the Browser’s DOM — It can produce about 200,000 Virtual DOM Nodes / Second 😲

That was a short intro of DOM and DOM — I mean the Real DOM and the Virtual DOM 😄

And, if you found this story useful, you know what to do now. Hit that clap button and follow me to get more articles and tutorials on your feed.

For more blog post: visit my website