Hello Readers, CoolMonkTechie heartily welcomes you in A Short Note Series (Real DOM Vs Virtual DOM Vs Shadow DOM In JavaScript Frameworks).
In this note series, we will understand the differences between the Real DOM, Virtual DOM and Shadow DOM in JavaScript Frameworks.
So Let’s begin.
Real DOM Vs Virtual DOM Vs Shadow DOM
| Real DOM | Virtual DOM | Shadow DOM | |
| Definition | It is the representation of a document/webpage/web application’s user interface as a tree data structure (node and objects). | It is a virtual representation of the real DOM as a tree data structure (node and objects). | The Shadow DOM can be thought of as a “DOM within a DOM”. It is a separate DOM tree with it’s own elements and styles, fully separate from the main DOM. |
| Usage | The Real DOM is used in every browser. | The virtual DOM is employed in many front-end frameworks and libraries like React, Vue etc. | Web components use the concept of. Shadow DOM. |
| The purpose of each technology | It provides a simpler, more programmatic method of representing web pages. | The virtual DOM was created to address performance problems with webpages and web application that resulted from the constant re-rendering of the whole DOM whenever DOM elements were updated. | The Shadow DOM was designed to contain and isolate DOM elements, hence preventing direct DOM leakage of those elements and their dependent data. |
| Implementation | Real DOM is implemented on the browser. | Virtual DOM is utilized by frameworks and libraries such as React, Vue etc. | Shadow DOM is implemented on the browser. |
| Principle | The DOM represents the document/webpage as nodes and objects, allowing programming languages like javascript to interact with the page using an API. | The Virtual DOM is a tree representation of the real DOM using nodes and objects and is subsequently used as a blueprint to update the real DOM. | The Shadow DOM doesn’t comprehensively represent the whole DOM. Instead of adding DOM items to the main DOM tree, it inserts subtrees of DOM elements into the document. |
Conclusion
In this note series, we understood about Real DOM, Virtual DOM and Shadow DOM differences and usages in JavaScript Frameworks. We also understood the DOM principles about Real DOM, Virtual DOM and Shadow DOM.
Thanks for reading! I hope you enjoyed and learned about the Real DOM Vs Virtual DOM Vs Shadow DOM In JavaScript Frameworks. Reading is one thing, but the only way to master it is to do it yourself.
Please follow and subscribe us on this blog and support us in any way possible. Also like and share the article with others for spread valuable knowledge.
You can find Other articles of CoolmonkTechie as below link :
If you have any comments, questions, or think I missed something, feel free to leave them below in the comment box.
Thanks again Reading. HAPPY READING !!
