14
Analyzing carefully for a better performance of an application, what are the main benefits in using one or the other and their differences? Angular for example works with the Shadow DOM approach, whereas React with Virtual DOM, I should consider this when choosing the framework or lib?
5
First and very important, let’s understand the DOM:
It’s the object model used in a web document, or so to speak, a web page. It defines how is modeling the objects that make up the page, things for example that the root of the document is the <html>, who has as children for example <head> and <body>, that within the <body> we use elements like <p> and <div>, that the tag <td> should be nested and daughter of a tag <tr>, who in turn is a daughter of a tag <table>, and so on.
Understanding this, let’s see the Virtual and Shadow DOM.
It is a copy or clone of the DOM itself, or in a simple way, a copy of the objects on the page.
Its purpose is very simple: improve performance in DOM manipulation.
You may not have noticed, but a page with many elements in the DOM can get physically large, and it has a crucial detail when it comes to performance: changes in the DOM can make the whole page render, and some processes made by Javascript can block the updating of the page.
This means that a simple color change or something more "heavy" like hiding a div that forces you to reposition adjacent div may require a lot of processing and time.
This is where the Virtual DOM comes in: its main object is to make all the changes in this "mirror" of the real DOM and apply everything at once, thus winning in performance. This way, you can update everything you need in an optimized way.
It is related to the concept of encapsulation of the Web components. Its main focus other than Virtual DOM is not performance related to changes in the DOM, but to make the code more readable, transparent and easy to understand. For example: knew the tag <input> is formed internally by elements <div>?
The following image shows this (I enabled the Shadow DOM view in Chrome’s Dev Tools), note the Node #shadow-root:
Note that, instead of creating a two Divs to position where the content will be typed, it is simpler and transparent to use a tag called <input>.
Some Frameworks make good use of this concept of componentization, such as Angular, where this is done through directives.
Now it is clear to understand the difference between the two and what the main purpose of each is. On the question, the manipulation of Virtual DOM is clearly more focused on performance, and Shadow DOM on simplifying the reading of the document and its semantics.
One important thing to note is that the Virtual DOM needs to be implemented, created with your own code if you don’t use any Framework already using it, while the Shadow DOM is already implemented by browsers, here you can see an example of code for how to create a pseudo-element: Using Shadow DOM
Here are some links from sources where I searched for information and also some for reference:
Very good answer man! congratulations
Thanks @Eduardovargas, I tried to describe the best I could and leave good references
Roughly the shadow DOM is the way to use "alias" to create components? Like input creates two divs? And why, in the case of Virtual DOM, creating a "mirror" of the DOM is more perfomatic?
In general it would be this @Victorcarnaval, usually called web componets, that encapsulate more complex html structures... an entire structure like <ul><li>.. we could appoint of <menu-principal> for example, but that would be rendered by the browser with the whole structure.
Got it @Ricardopunctual, thank you for the answer. And can you tell me about Virtual DOM? Why he is more perfomatic being that creates a "mirror" of the GIFT to do the same thing he would do in the GIFT itself?
@Victorcarnaval The problem with DOM is that some changes require rendering the entire page again. Imagine that in a layout of columns that align to the side column, make a display: none for example, the whole page may have to be rendered again, as the various elements need to be repositioned. Until then the Virtual DOM might not have made so much difference, besides consuming memory by doubling the DOM.
Now imagine an ajax call that retouches a json with an array of 50 elements, and you want to add that to a list ul for example depending on positioning, it may be that with each item added in the DOM, the browser engine has to recompose the screen, and still can general a block, making an unpleasant effect of "locking" while updating several times for each of the 50 items.
Now if you do all this in Virtual DOM this effect will not be noticed by the user, and once the work is done, Virtual DOM can fully update the entire DOM, being faster, causing a single update and improving the user experience.
Although the Engines are different, it is similar to what happens with the database. Suppose you need to update 50,000 records, if you do one by one it will cost a lot more processing and time than if you send a single script changing everything at once, or using something even more geared to this type of operation bulk insert, that will update an entire block of data at once, doing so much faster than one by one. Have another question related to this, talking about updating items in batch and individually here: https://answall.com/q/322056/57220
Thanks for the explanation! I’m beginning to understand these features better.
1
First let’s start with the SHADOW DOM which is used by the angular and webcomponents
The shadow dom is nothing more than the method that the angular and the webComponents api uses to encapsulate component styles basically when you use Viewencapsulation.Native on an angular component makes it easy to visualize this, basically for each component it generates a hash and uses this hash as html selector thus avoiding conflicts with other components.
Virtualdom used by React.
The virtual gift of React is nothing more than a more lightweight implementation and optimized for the gift React. When you select a native div for example it has several properties that for React are not needed for example. With that when you create a div you are actually creating an React.Div with fewer things. Another advantage is that React compares these virtual dom trees to know what to upgrade and be more efficient.
Completion
So realizing a conclusion here I find it hard to compare the two because they serve different purposes and it’s even possible that a framework in the future uses both as has angular rumors going to a virtual gift solution like React and that wouldn’t stop it from using shadow gift.
Summarizing the first serves to encapsulate styles into components and the latter is related to rendering performance
Would it be possible to focus more on the differences between them and what should be considered in the choice of the library? The definitions of each independent has already been answered in What is the difference between DOM and virtual DOM? and What is shadow DOM?
Hi woss so guy I find it hard to answer comparing the two because they serve different purposes, except the name gift the two do not have much in common. The former serves to encapsulate styles into components and the latter is related to the main performance of the React. To me it’s like composing apples to oranges
And both are fruits, in the same way that both work with DOM :D The question asks what the difference between using one or the other, and if they are not exclusive would give to complete putting as it would be using both.
I edited trying my best. Otherwise expect another hahahahaha answer
Browser other questions tagged javascript angular react performance dom
You are not signed in. Login or sign up in order to post.
Related: What is the difference between gift and virtual gift
– Denis Rudnei de Souza
@Denisrudneidesouza I would like a more specific answer regarding the Shadow DOM effectively, would know to help me?
– Getulio Rafael Ferreira
Oops, I put as related more to help other people, I’m also seeing a good answer to that
– Denis Rudnei de Souza
It’s more like a compliment
– Denis Rudnei de Souza
Shadow DOM and Virtual DOM have no relationship. A framework can use both or none. Shadow DOM is an encapsulation of the node tree, while Virtual DOM is an abstraction of DOM for DOM to be manipulated efficiently. You can create an answer with the advantages of each one, but you can’t compare one "against" the other.
– fernandosavio
What is Shadow DOM?
– Woss