Tag: Shadow DOM Vs Virtual DOM

A Short Note – Real DOM Vs Virtual DOM Vs Shadow DOM In JavaScript Frameworks

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 DOMVirtual DOMShadow DOM
DefinitionIt 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.
UsageThe 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 technologyIt 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.
ImplementationReal 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.
PrincipleThe 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.
Real DOM Vs Virtual DOM Vs Shadow DOM

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 !!

A Short Note – Shadow DOM vs Virtual DOM In ReactJS

Hello Readers, CoolMonkTechie heartily welcomes you in A Short Note Series (Shadow DOM vs Virtual DOM In ReactJS).

In this note series, we will understand about the difference between Shadow DOM and Virtual DOM in ReactJS. We discuss the key differences between the virtual DOM and the shadow DOM.

So Let’s begin.

The shadow DOM and virtual DOM are both fundamental to progressive web frameworks like Angular, Vue, and React. While the shadow DOM encapsulates the implementation of custom web components, the virtual DOM is used to differentiate changes and more effectively re-render UIs.


What is the Virtual DOM ?

The virtual DOM is an in-memory representation of the real DOM. Popular UI libraries like React and Vue implement a virtual DOM to more efficiently re-render UI components based on a “diffing” process. By comparing changes between a virtual DOM and the real DOM, rendering engines can more efficiently determine what actually needs to be updated. This avoids unnecessary redrawing of DOM nodes as only elements that have changed are redrawn. Without the virtual DOM, every element is redrawn regardless of whether or not it has changed. This adds a huge performance boost to DOM manipulation since redrawing elements is an expensive process.


What is the Shadow DOM ?

The shadow DOM is a way of encapsulating the implementation of web components. Using the shadow DOM, you can hide the implementation details of a web component from the regular DOM tree. A popular example is the HTML5 slider input. While the regular DOM recognizes this as a simple <input/> tag, there is underlying HTML and CSS that make up the slide feature. This sub-tree of DOM nodes is hidden from the main DOM to encapsulate the implementation of the HTML5 slider. Additionally, the CSS properties for the slider are isolated from the rest of the DOM. This provides an isolated scope that prevents the component’s styles from overriding other CSS properties defined elsewhere.

The isolated scope provided by the shadow DOM results in performance benefits. By isolating the CSS properties for a custom web component, the browser can more accurately determine what needs to be updated when the DOM is manipulated.


Shadow DOM vs Virtual DOM

While the shadow DOM and virtual DOM are seemingly similar in their creation of separate DOM instances, they are fundamentally different. The virtual DOM creates an additional DOM. The shadow DOM simply hides implementation details and provides isolated scope for web components.


Conclusion

In this note series, We understood about the Shadow DOM vs Virtual DOM In ReactJS. We conclude that both the shadow DOM and virtual DOM have played a key role in the development of progressive web frameworks. While both add performance benefits, the virtual DOM is used to efficiently redraw UIs whereas the shadow DOM encapsulates the implementation of custom web components.

Thanks for reading ! I hope you enjoyed and learned about Shadow DOM Vs Virtual DOM Concepts in ReactJS. Reading is one thing, but the only way to master it is to do it yourself.

Please follow and subscribe to the 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 :

You can also follow official website and tutorials of React as below links :

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 !!???

Exit mobile version