Inefficiency Leads to Abstraction
DOM vs. Virtual DOM
Today, we will look at the progression from the DOM to virtual DOM and see what caused the creation of virtual DOM. Before we can talk about the progression, we need to understand what DOM and virtual DOM are. Let’s start with what the DOM is…
What is the DOM?
When a web page is loaded, the browser creates the Document Object Model of the page. That means the DOM is the current representation of a webpage which might be different from the initial HTML that a web app might have. The DOM is the upside-down tree structure of the HTML elements that show parent/sibling/child relationships. With the object model, JavaScript gets all the power it needs to create dynamic HTML, meaning adding, removing or updating nodes. While jQuery can be used for basic DOM manipulations, vanilla javascript with methods like #appendChild and others are more than enough.
DOM inefficiency
2 ways elements can be updated in the DOM:
- Dirty Checking (slow) — checks through all node’s data at a regular interval to see if there have been any changes. This is inefficient because it requires going through every single node repeatedly to make sure it’s data isn’t “dirty” (out of date). This is what the DOM does and as programmers we hate repetition, this is where the virtual DOM can help.
If one of these list items updates, then the DOM re-renders the entire list. This is where the DOM’s inefficiency stems from:
2. Observable (fast) — components are responsible for listening to when an update takes place. Since the data is saved on the state, components can simply listen to events on the state and if there is an update, it can re-render to the UI.
We would like to only re-render items that receive updates, leaving the rest of the items as-is. React’s use of the Virtual DOM helps to reduce this inefficiency.
Introduction to Virtual DOM:
The virtual DOM is an abstraction of the DOM. It is a copy of the DOM, that can be updated without affecting the actual DOM. If there are differences between the DOM and Virtual DOM, now those differences will be shown in a re-render using methods like diffing and the DOM now has the updated state. At this point, the Virtual DOM is the copy of the most updated DOM. If more updates occur in the future, the cycle described above repeats. Virtual DOM has all the same properties as the real DOM object but doesn’t have the ability to write to the screen like the real DOM, hence only the DOM can be seen in browsers. The virtual DOM gains its speed and efficiency from the fact that it’s lightweight. A new virtual DOM is created after every re-render.
Conclusion:
The virtual DOM is an abstraction of the DOM that increases efficiency and speed by only rendering components that are updated instead of the whole entire page. Each component in the DOM is stateful and updates occur if there’s a change in the state of any component. Refactoring can happen in many forms, the abstraction of the DOM to virtual DOM is an example of refactoring that results in increased efficiency and speed. This blog is an attempt to look at the progression from DOM to virtual DOM and why it was needed, the answer being inefficiency. Happy coding!
Resources:
<https://medium.com/@hidace/understanding-reacts-virtual-dom-vs-the-real-dom-68ae29039951>
<https://giphy.com/search/the-end>
