In the modern world of web development, we have been hearing repeatedly about a buzzword called the Virtual DOM. This article will deal with explaining this word to the users, for those who think this word as an alien term. So before going into the concepts behind Virtual DOM, I think we will look at the basics of what a DOM is. This will give a clear starting idea for us to grasp the concepts behind Virtual DOM. Almost every person from the web development domain will be having a general idea of what DOM is and why is it essential. for the others, DOM stands for document object model. This is an object tree that the browser creates during the web page rendering process. The browser converts the response from the server to a presentable form and displays it to the user through the rendering process. Normally the entire life cycle of the browser in serving any page can be generally categorized into the following categories.
- Browser or client sends http requests to the server
- The server sends the response to the client browser
- The browser interprets the response and builds the DOM tree
- Browser downloads the additional contents like style sheets, scripts, images etc and renders the DOM tree by calculating layouts based on the applied style sheets
- Final process called painting that actually displays the interpreted content to the screen.
So what is Virtual DOM.
Virtual DOM is an in memory object based representation of the actual DOM. Virtual DOM will represent an object hierarchy similar to that of the DOM in the memory. All the DOM level changes that are made by the application are manipulated in the Virtual DOM object hierarchy rather than the original DOM directly. These changes are then propagated to the actual DOM in an efficient manner, so that most of the expensive DOM related computations can be avoided to a considerable amount. So how does Virtual DOM manages to do these kinds of stuff. First of all Virtual DOM is a completely in memory based setup. So any changes made to it will be committed almost instantaneously. These changes then have to be propagated to the actual DOM, so that the user can see the result. Virtual DOM will not commit the changes directly to the actual DOM once any changes are detected, instead it follows a set of strategies, so that the original DOM manipulation can be reduced to a significant level.
The following are the strategies that are implemented by Virtual DOM for efficient update of actual DOM.
- change detection using diff algorithm
- batch update
- in memory queries.
The first and the foremost setup for almost all Virtual DOM implementations is to reduce the amount of DOM manipulation that is being done for an user task. So when a change is propagated to the actual DOM, the entire changes can be made with very less effort. When something in an element hierarchy is changed, instead of changing and rendering the whole element, Virtual DOM with actually find the diff of the original DOM and the current updated in memory Virtual DOM. The actual changes are calculated, and only those changes will be made to the actual DOM during the rendering process. So instead of replacing and entire element hierarchy, we are just updating the actual change.
Even though the changes are made in the Virtual DOM, they have to be propagated to the actual DOM to show the final output to the user. So some way or the other, the final DOM update has to be made. So instead of making each and every minor change, the changes are queued up and then the updates to the DOM are done in a batch. So that the iterations to make DOM manipulations are reduced. The batching process for this DOM update is done in such a way that, the final rendering remains unaffected to the user (This is taken care of by the batching algorithm).
Regarding in memory queries, the read operations to the DOM nodes are returned from the Virtual DOM in memory rather than touching the DOM directly. Since the Virtual DOM is an in memory object, the queries will be returned faster than accessing those values directly from the DOM representation. This in turn will improve the performance in the case of read operations to a significant level.