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 document
DOM
elements have a defined structure into objects, with methods, properties that can be easily accessed.They are treated asnode
and represented asDOM Tree
.
1 | <span class="token tag"><span class="token punctuation"><</span> html <span class="token punctuation">></span></span> -> document node <span class="token tag"><span class="token punctuation"><</span> head <span class="token punctuation">></span></span> -> element node - head <span class="token tag"><span class="token punctuation"><</span> title <span class="token punctuation">></span></span> HTML DOM -> text node <span class="token tag"><span class="token punctuation"></</span> title <span class="token punctuation">></span></span> -> element node - title <span class="token tag"><span class="token punctuation"></</span> head <span class="token punctuation">></span></span> <span class="token tag"><span class="token punctuation"><</span> body <span class="token punctuation">></span></span> -> element node - body <span class="token tag"><span class="token punctuation"></</span> body <span class="token punctuation">></span></span> <span class="token tag"><span class="token punctuation"></</span> html <span class="token punctuation">></span></span> |
- DOM APIs
HTML DOM
providesAPIs
for browsing and editingnode
.Specific examples of APIs can be included, such asgetElementById()
used to access an element byid
orremoveChild()
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
1 | <span class="token tag"><span class="token punctuation"><</span> style <span class="token punctuation">></span></span> <span class="token style language-css"><span class="token selector">p</span> <span class="token punctuation">{</span> <span class="token property">color</span> <span class="token punctuation">:</span> green <span class="token punctuation">}</span></span> <span class="token tag"><span class="token punctuation"></</span> style <span class="token punctuation">></span></span> <span class="token tag"><span class="token punctuation"><</span> p <span class="token attr-name">id</span> <span class="token attr-value"><span class="token punctuation">=</span> <span class="token punctuation">"</span> sd-root <span class="token punctuation">"</span></span> <span class="token punctuation">></span></span> I am Shadow Root <span class="token tag"><span class="token punctuation"></</span> p <span class="token punctuation">></span></span> <span class="token tag"><span class="token punctuation"><</span> script <span class="token punctuation">></span></span> <span class="token script language-javascript"><span class="token keyword">const</span> host <span class="token operator">=</span> document <span class="token punctuation">.</span> <span class="token function">querySelector</span> <span class="token punctuation">(</span> <span class="token string">'#sd-root'</span> <span class="token punctuation">)</span> <span class="token punctuation">;</span> <span class="token keyword">const</span> root <span class="token operator">=</span> host <span class="token punctuation">.</span> <span class="token function">createShadowRoot</span> <span class="token punctuation">(</span> <span class="token punctuation">)</span> <span class="token punctuation">;</span> root <span class="token punctuation">.</span> innerHTML <span class="token operator">=</span> <span class="token template-string"><span class="token string">` <style> p { color: gray }</style> <p>Hello <strong>Shadow DOM</strong></p> `</span></span> <span class="token punctuation">;</span></span> <span class="token tag"><span class="token punctuation"></</span> script <span class="token punctuation">></span></span> |
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
insideShadow DOM
despite the conflict selector with the outside but okay because ofShadow 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 theShadow Root
, specifically It isShadow 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 theoriginal 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:
- Confirm the relevant
event
+View Object
- Impact on
DOM
elements onView
and reflect that data change.
Data-binding in virtual DOM
The
framework
useVirtual-DOM
, theVirtual-DOM
both acts as aModel
and acts as aView
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
:
- Rebuild the component
- Update virtual DOM
- Find the change
- 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.