Vue's Virtual DOM: A Fast and Powerful Mechanism

 

Vue's Virtual Dom: Why It Works

Vue is a lightweight easy to use framework that is lauded for its ability to quickly render and update large and complex applications. This is due in part to the virtual DOM (Document Object Model) that Vue makes use of to update the DOM only as needed and not to re-render the entire DOM every time there is an action or change.  Vue's use of a virtual DOM is not unique in the world of frameworks. Indeed, another crowd favorite, React, also uses a virtual DOM.  Virtual DOMs have become a popular way to manipulate the real DOM to minimize slowness and reduce performance issues.

What is the Virtual DOM?

Virtual DOM

Vue creates a "virtual DOM" by creating Javascript Objects out of nodes that are usually represented by HTML. The virtual DOM can be thought of as a local copy of the real DOM. Any changes that happen will be updated and tracked on the Javascript Object (the local copy), and since Javascript is incredibly fast, updating these objects is efficient and quick.

The updating of the Javascript Objects does not trigger a DOM repainting of all of the nodes, however, as soon as the virtual DOM has updated, the changed nodes will be repainted on the real DOM. Updating and redrawing of the real DOM is what takes up a vast amount of time, and this time-cost is minimized by only repainting specific nodes that have changed.

In past projects, the technologies we used would perform standard DOM updating. This means that when one HTML node was changed, it would trigger a full repainting of every node in the DOM, which is both time and memory inefficient.

Virtual DOM Update (https://www.slideshare.net/zoetrope/incremental-dom-and-recent-trend-of-frontend-development  - Akihiro Ikezoe)

In one of Eikos’s recent projects we incorporated components from the D3 library including charts, histograms, and graphs that will render with whatever new data is served. We are also building out a complex financial blotter tool using Vue that has data constantly streaming to it and thus will need frequent updates to certain fields. These complex graphics are quickly repainted and rendered in the DOM thanks to Vue’s virtual DOM.

One of the primary reasons we champion the use of Vue is for its quick DOM rendering time, thanks to the framework's use of a virtual DOM.  While a virtual DOM probably isn't necessary for small or simple applications, when building large scale applications with a lot of front end interactions and DOM nodes, Vue's virtual DOM ensures swift and efficient updating for a quicker app and better user experience.

What's your experience using virtual DOM technology? Let us know!

Contact Us

 

Topics: Design Thinking

Top