As a front-end developer, you might have had to manipulate Document Object Model(DOM) when you build your application. The problem is: the bigger your app grows, the more complicated you have to deal with DOM management.
Recently, frameworks or libraries based on javascript are growing rapidly in order to help developers resolve this issue. You can see in the graph below showing the three most popular UI frameworks:
Downloads number of angular, react & vue(npmtrend).
And for two specific frameworks ReactJS and VueJS, they give us a new concept in managing DOM changes called Virtual DOM. So what is Virtual DOM actually, and what does it help us in DOM operation?
1. Why Do We Need Virtual DOM?
If your client-side application has a super complex structure, it will result in a complicated DOM tree. Therefore, manipulating DOM directly can easily lead to performance bottlenecks. In this situation, whenever something changes not only can become a big struggle for yourself to check the differences in the data model, but also can trigger a re-render of the entire DOM tree.
However, this doesn’t mean that DOM is slow. What costs us performance here is that the browser has to recalculate CSS and redo the layout for the web page.
Imagine this happens when you’re shopping online on an eCommerce website, whenever you add an item to your cart you have to spend seconds waiting for the web page to be reloaded. Annoying, isn’t it?
A new term was born called Virtual DOM to solve this problem. Although it has been around for years, its reputation only became more widely known when it was applied in ReactJS and VueJS.
2. What Is Virtual DOM?
Basically, it’s just a node tree that lists elements, element’s attributes & content as objects and properties. For example, here is a normal DOM:
The node tree of our HTML.
Now Virtual DOM from the above code can be represented as something like this:
Virtual DOM
The Virtual DOM gets translated to an object-based representation of our HTML, something that’s not so fundamentally different from our previous DOM. However, since it is a plain javascript object, it is much easier for us to manipulate.
3. How Virtual DOM Is Applied In UI Frameworks?
The render method of Reactjs or Vuejs will create a node tree from components, update this tree in response to mutations in the data model.
These UI frameworks observe the changes in the data model, render a Virtual DOM tree with the latest values then compare the previous DOM with the new Virtual DOM generated. If there are any differences, it will replace the old components with the new ones.
You can imagine this action like a patch:
Only the parts that actually change are updated.
In summary, it’s a three-step process to update the newest view if you’re using Vuejs or Reactjs:
- Every time something may have changed, a copy of the entire DOM will be created in a Virtual DOM representation.
- A diff algorithm designed to identify changes between DOM representations. Reactjs or Vuejs will batch the DOM changes to update mass.
- A patch is executed – changed elements will be replaced with the new ones which have the latest data.
4. Comparing Virtual DOM Vs DOM
Until now, there’s still no answer whether Virtual DOM is faster than Normal DOM. Some say that keeping representations of a UI in memory so as to compare & patch changed elements can cause a high CPU load while others think that re-rendering the entire DOM tree is a waste of time, superfluous and inefficient.
I have made a basic experiment based on performance indicators of google chrome to compare these concepts. In this example, I created a button that triggers an increment in the `count` variable(initial value is 0) when it’s clicked. The left of the figure below is built with HTML & javascript and the right one is built with Reactjs.
Let’s take a look at the statistical numbers:
Comparison between Normal DOM & Virtual DOM
As you can see, there are differences in indicators here. Reactjs takes less time in total to re-render view on the browser but needs more time to run the script. On the other hand, the Idle index shows the time the browser waits for missing data or resources needed to resume rendering the final page on the screen. It is somewhat shown that updating only changed elements will help improve the browser’s render process.
5. Conclusion
Although the above example shows that Virtual DOM is faster than Normal DOM, there is not enough evidence to demonstrate which is actually faster because of the scale of the application and many other factors. In my opinion, if you’re building a large-scale client application with frameworks using the Virtual DOM concept, the speed of your application depends much on how you deal with updating pages. You must be the one to control the flow of your application, decide when to render or re-render something due to the user’s actions. You can’t always depend on the latest tech to resolve your problems. What Reactjs or Vuejs can help us provide a new way to update the DOM tree, replacing components with the latest values. Therefore, use them wisely and optimally.
Above is the article of our dedicated Software Engineer. If you have interested, feel free to follow this link to learn more: https://medium.com/@edwardluu1102
Have any further questions or have a project idea in mind? Leave us a message and we’ll be happy to chat. SotaTek is a global Software Development as a Service (SDaaS) & IT Consulting group. We take charge of different project sizes for worldwide clients, which is Software Development, including Web/App, Blockchain, AI & Machine Learning, Odoo ERP with success guaranteed. So, let our 600+ experienced in-house employees serve you!
