Original DOM vs. Shadow DOM vs. Virtual DOM

Tram Ho

For you to learn about W eb Development, surely no stranger to the concept of DOM? Or more specifically like Original DOM ?

In addition to small and medium-sized websites, are you ever wondering, big websites like Facebook, Twitter, GMail, etc. , have an “Amazon tree forest” in your source code HTML , they manage the DOM Tree as how?

And of course only with the DOM , web developers can hardly handle the mountain of things like that. Since then came the concept of Virtual DOM and Shadow DOM .

Just like the title, in this article, let’s learn more about the Original DOM , Shadow DOM and Virtual DOM to get a better view of them.

Let’s start

Original DOM

Overview

You probably know, DOM is short for Document Object Modal .

DOM includes:

  • Object-based representation của HTML documentDOM elements have a defined structure into objects, with methods, properties that can be easily accessed.They are treated as node and represented as DOM Tree .

  • DOM APIsHTML DOM provides APIs for browsing and editing node .Specific examples of APIs can be included, such as getElementById() used to access an element by id or removeChild() to remove a child element based on its parent element.

Shadow DOM

Overview

Mozilla has summarized three basic characteristics of Shadow DOM :

Shadow DOM can be thought of as:

  • Isolated DOM
  • Phiên bản “lite” của DOM
  • NOT of a full standalone document

The reason to say that is because the stylesheet or javascript from outside non- Shadow DOM into Shadow DOM and vice versa.

For example, we have the <Video> tag as a custom element .

Structure of a DOM shadow

With Shadow DOM we will get more Shadow Root . The content of Shadow Root will not be render by the browser but instead is Shadow Host . Shadow Host is treated as a normal element but the content inside it (the stylesheet ) will be packaged and independent of the outside world:

Create a DOM shadow

You guess what the result will be . . .

Here when the browser finishes rendering, we will get:

instead of

When Inspect the element, we will see this:

Thus, we will have some comments as follows:

  • Style inside Shadow DOM despite the conflict selector with the outside but okay because of Shadow DOM ( scoped style sheet ) feature
  • When we access the #sd-root element’s .innerHTML() , we can only get the initialized text: ” I am Shadow Root ” and can not do anything inside the Shadow Root , specifically It is Shadow Host .

Okay, we have a better understanding of the DOM :

  • Its light (often called the Light DOM ) is what we can interact with.
  • Its dark part, the shadow ( Shadow DOM ) only reflects how it will be rendered when the Light DOM changes.
    And of course, we can never touch the shadow of an object

So good DOM , why does Virtual DOM do it?

Let’s find out

Virtual DOM

Although this concept has been around for a long time, it only became popular when used in popular libraries like ReactJS , VueJS

Overview

True to its name, DOM-virtual. Virtual, meaning not real

Virtual-DOM is an Object that contains the information needed to create a DOM (Document Object Model).

Virtual DOM has the ability to calculate and update node without using DOM APIs . After updating the DOM ảo , changes will be made to the Original DOM .

As some of the features I mentioned above, Virtual DOM is seen as an effective way to solve the update problem on the DOM , without needing to render the entire DOM Tree .

Below is a specification of a DOM Tree :

into a Virtual DOM :

In fact, instead of using the toàn-bộ-object , we often work with smaller object-nhỏ-hơn correspond to the components of Virtual DOM .

Operation mechanism

Initially, an object that serves as a snapshot from the virtual DOM will be created:

This copy is used to create diff to compare with the original virtual DOM , it will basically look like this:

Since then, helping the Engine know which elements to update in the original DOM , they only perform update when there are changes.

To do this, just use a loop loop with diff whether to add a new node or update the old node :

Then, update the list , rewrite the entire template , run the render() function, the display changes out of view .

Although it is said that the entire template , but only the actual changes are updated. Changes made to this object are then reconciled and modified for the original DOM .

Why use Virtual DOM?

Speed

Previously I thought the reason for using the Virtual DOM faster than the Original DOM was because the attribute setting for the object was faster than the DOM update , but not you.

The fact that updating the DOM n’t take much time compared to updating the attribute for the object .

What really affects speed performance here is that when the DOM changes, Browser forced to recalculate CSS , build layout, paint template …

Because of the DOM structure of a tree structure , when we want to change its element and sub-tags, we have to go through Reflow/Layout . From there, the changes will be re-painted . The more item have to reflow/repaint , the slower your web will load

Hmmm …

To better understand this issue, let us learn one more concept that is about binding .

Data-binding

data-binding concept can be understood simply:

Data-binding : Data in Model changes <=> View changes.

Data-binding in the real DOM

Now that we have a little glimpse of framework with data-binding mechanisms like BackboneJS , AngularJS , when Model Object data changes, it will:

  1. Confirm the relevant event + View Object
  2. Impact on DOM elements on View and reflect that data change.
Data-binding in virtual DOM

The framework use Virtual-DOM , the Virtual-DOM both acts as a Model and acts as a View

Thus, when Virtual-DOM changes, all changes on the Model to changes on the View and vice versa.

Although it does not work directly on the DOM elements in View , data-binding still implemented. This makes the application speed significantly increased.

BONUS: Virtual DOM in ReactJS

Although this section is slightly expanded compared to the article title a bit, but yesterday I accidentally read an article about how ReactJS manipulates DOM ảo quite interesting, so the bonus for us to understand more about Virtual DOM okay ^^

With a library using DOM ảo like ReactJS , after the real DOM is loaded for the first time , the DOM ảo also generated by React corresponding to the DOM thật above. In React, it is also called a Component with a tree structure consisting of sub-Components within.

Note:

When a new state is set , React marks it as a dirty Component (meaning that whenever we call setState() , the Component will be marked as dirty).

The event we manipulate with the DOM are listened to by the React event listener . Therefore, when there is an event , that event will be sent to the React event listener and then run an anonymous function()

In anonymous function() , we call this.setState() with a new state value . After this.setState() is run, the Component is marked as dirty .

Okay, what happens next:

Running through the lifecycle Component

The most important thing during the update process is render() , after rebuilding the Component, the DOM ảo is recreated and the DOM ảo updated to find the difference * (as shown in the section of the Operation Mechanism above). ) *, from which to find the specific element changes, and then update only those elements in the DOM thật .

Snapshots & Diffing

React takes a snapshot of the Virtual DOM (the state record right away) just before applying any updates. Then, it uses this snapshot to compare with a Virtual DOM updated before making changes.

When updates are granted to Virtual DOM (the Virtual DOM uses key , ref but there is no DOM and the new Virtual DOM is created after each render ), the next process of React uses Diffing algorithm to compare and contrast To know where the update takes place then update it without ignoring extraneous elements.

Therefore, work-flow of React manipulates the DOM ảo when there is change detection :

  1. Rebuild the component
  2. Update virtual DOM
  3. Find the change
  4. Real DOM Update

Thanks to the DOM ảo , React can find node are changed and updated in the DOM thật only in those node which is convenient and fast, right ^^

So we went through the Original DOM , Shadow DOM or Virtual DOM . Hopefully this article can help you better understand DOM and related issues.

Share the news now

Source : viblo