DOM vs Shadow vs Virtual DOM

📄 Table of contents:

2. Shadow DOM

3. Virtual DOM

4. Differences between Shadow DOM and Virtual DOM

5. Conclusion

DOM (Document Object Model) is a fundamental concept in front-end, and for sure, everyone who tried to learn programming has heard about it more than once. For beginners, it’s not so easy to understand what it exactly is and how to manipulate it. DOM manipulation isn’t so easy and comfortable, and the most important, it brings a lot of issues with performance. Nowadays, there are two essential concepts of DOM came with progressive web frameworks like Angular, React.js or Vue.js, Shadow DOM and Virtual DOM. In this article, I want to explain:what is the Document Object Model (DOM),

  • what is Shadow DOM,
  • what is Virtual DOM,
  • what is the difference between Shadow DOM and Virtual DOM

I will also try to tell you about the differences between them and what advantages and disadvantages each of them brings. Let’s start with an explanation of what DOM is.

1. What is DOM?

As you can see, it’s created as a tree. It starts from the main document object, then the object is created, and element leads to and , and so on. Each of the objects represents an HTML element from the website as an object, with properties, attributes, and methods which allows to modify it.

2. Shadow DOM

3. Virtual DOM

4. Differences between Shadow DOM and Virtual DOM

Conclusion

You might have heard about the virtual DOM concept of ReactJS and how it changed the complete world with its supersonic speed. Is it really so or just nonsense? Probably! Well, it is not the only feature that makes ReactJS superior to its contemporaries. There are lot More features like React Components, React Elements, Unidirectional flow makes it powerful. There are three kinds of DOMs present in React which are real DOM, Shadow DOM, and the virtual DOM.

The normal DOM or the actual one is nothing but the object-based representation of the HTML elements. The browser converts the code into a tree-like structure that is made into javascript and compiled by the HTML and CSS compilers. There are multiple processes takes place to create a view on the browser as below.

DOM: It is an object-based representation of all the elements present on the webpage. We can see the normal HTML representation of the code as below.

At the time of compilation inside the browser, the DOM like structure can be seen as below.

Source: https://software.hixie.ch/utilities/js/live-dom-viewer/

Now, the virtual DOM is the same copy of the actual DOM that is maintained inside the RAM of the browser. React uses this VDOM for its execution and it renders the page. So, whenever the change is detected in the States of the application, it creates another VDOM of the updated values. Now, instead of rendering the Complete webpage on every change detection, it just compares the changed part and reflects it in the actual DOM.

The detection of change takes place using the ‘Diffing’ Algorithm and the process of transforming them into actual DOM is known as ‘Reconciliation’. Unlike other frameworks, it does not renders the complete page for every change. Hence it makes React faster.

Now, let’s consider you have implemented the third party CSS library for the look and feel of the table. Due to this all other UI elements like sidebar, header, and footer are also been impacted and the styles are disturbed. Hence, to maintain such kind of encapsulation between certain subtrees inside the main DOM-tree, HTML5 has come up with the shadow DOM concept.

Shadow DOM is not a standalone document like the actual DOM, but it resides in it. It’s very similar to the component-based architecture of React or angular where every component has its own set of stylesheets and global styles as well. ReactJS does not use the shadow DOM for making it faster, it completely relies on the virtual one. But anyone can use this feature of HTML5 intentionally if required.

One of the way to define a function is known as a function expression. This way, it’s possible to define a named and anonymous function as well. Also, hoisting doesn’t work in this case, so the function has to be defined first, and then it can be used. Most functions created with this method are assigned to a variable. Let’s take a look at the code example:

var sayHi = function (name) {
return 'Hi' + name;
}

In the example above function is assigned to variable sayHi, but the function itself doesn’t have a name, so we may call this function anonymous.

Return

// With return
function calc(a, b) {
return a + b;
}
calc(1, 4) // returns 5// Without return
function calc(a, b) {
a + b;
}
calc(1, 4) // returns undefined

In the example above the first function returns the result of math operation, and the other one doesn’t have the return statement, which means it will return undefined.

Parameters and arguments

Parameters and Arguments are NOT same but used interchangeably

Experience with Front-end Technologies and MERN / MEAN Stack. Working on all Major UI Frameworks like React, Angular.

Get the Medium app

A button that says 'Download on the App Store', and if clicked it will lead you to the iOS App store
A button that says 'Get it on, Google Play', and if clicked it will lead you to the Google Play store