DOM vs Virtual DOM vs Shadow DOM
Last Updated: 2022-04-25
- "real" DOM: represents what you see on your screen; One page have one single DOM; any change will make a rerending of the whole object.
- Virtual DOM and Shadow DOM are trying to resolve the performance issue in different ways:
- Virtual DOM is creating a copy of the whole DOM object and keep it in memory to track changes
- Shadow DOM creates small pieces of the DOM object which has their own, isolated scope for the element they represent.
- Examples: React.js uses Virtual DOM; Lit (based on Web Components) uses Shadow DOM; Solid.js uses real DOM.
- the browser parses the HTML to a tree-like structure; each tree node is an object.
- The whole page is a single big DOM tree. Performance issue: Every change will make a re-rendering of the whole object.
- Defined and managed by React, to mirror the real DOM (It saves a copy of DOM in memory)
- faster to chagne; changes to the states will first be applied to Virtual DOM; only if it requires UI Changes,
ReactDOMwill then update the real DOM.
- comes in small pieces; it does not represent the whole DOM, only sub-trees.
- Shadow DOM creates a scoped tree that connects to an element; the element is called shadow host.
- everything added to Shadow DOM is local (including styles).
- it isolates the DOM, the component is a separate element that does not appear in the DOM.
- it simplifies styling: styles created in a single Shadow DOM element is isolated.
- An application using Shadow DOM is not one single big tree, but built on components.