242 reads

Difference Between Real DOM and Virtual DOM: What You Need to Know

by Favour OhanekwuNovember 20th, 2024

Too Long; Didn't Read

These performance bottlenecks can cause websites to perform very poorly. The concept of the Virtual DOM was introduced by modern frameworks such as React to enhance the performance of websites and promises much faster UI updates and smoother interactions.

featured image - Difference Between Real DOM and Virtual DOM: What You Need to Know

‘a red apple next to a blue apple’ Image created by HackerNoon AI Image Generator

Problem Statement

Web development has evolved from building static web pages to creating complex user interfaces (UIs) and highly responsive web pages. These web pages require frequent updates to the Document Object Model (DOM) created by the browser when the HTML of the page is loaded. Frequent updates of the Real DOM are quite expensive, especially for complex user interfaces because each update causes the browser to perform processes such as reflow, re-painting, and re-rendering to reflect the changes on the screen.

Understanding how the Virtual DOM works is essential for developers who want to make more informed decisions when creating or selecting frontend libraries or frameworks.

The Real DOM

The Real DOM (Document Object Model) represents the structure of an HTML document.

It is a hierarchal, tree-like representation of the loaded web page created and managed by the browser. Each element in the webpage, such as texts, attributes, and tags represents nodes in this tree. The Real DOM exposes a standard API (Application Programming Interface) that allows developers (using JavaScript and other scripting languages) to interact with, and directly manipulate the content, style, and position of elements in the web page.

Characteristics of the Real DOM

Tree Structure: The Real DOM is a tree of objects with each node of the tree corresponding to a part of the web page (An element, attribute, or text).
Direct Manipulation - Changes made to the Real DOM cause a direct manipulation of the actual HTML elements. This means that for every change made to an element such as updating the text content or changing an attribute, the browser re-renders the entire page or large parts of it to reflect those changes on the screen.
Performance Overhead: Frequent updates to the Real DOM translate to frequent re-rendering of large parts of the page or the entire page. This can lead to performance bottlenecks, especially for complex or dynamic web applications.
Synchronous Rendering: The Real DOM is synchronous. This means that when a change is made, the browser updates relevant parts of the web page and blocks further operations until the update is complete.
Immutability: The Real DOM is mutable. This means that elements can be modified, added, or removed as needed.

The Virtual DOM

The Virtual DOM is a very much lighter representation of the Real DOM, stored in the application's runtime memory in the form of a JavaScript object. It allows modern frameworks such as React to manage changes more efficiently by reducing the direct manipulation required on the Real DOM.

When the state of the application changes (this could be as a result of a user interacting with an element on the web page), React updates the Virtual DOM (rather than the Real DOM). The snapshot of the updated Virtual DOM is compared to the snapshot of the virtual DOM taken just before the update. This is done via a 'diffing' algorithm.

It determines what element was changed, and then updates only that element on the Real DOM, rather than re-rendering the entire page. By minimizing direct manipulation of the Real DOM, the Virtual DOM reduces the number of expensive DOM operations, leading to much faster updates and better user experiences.

Characteristics of the Virtual DOM

Lightweight - The Virtual DOM is significantly smaller in size than the Real DOM, making it much more efficient to manipulate.
Batched Updates - When there is a rapid change in the state of the application, updates to the Virtual DOM are often grouped together. This reduces the number of times that the Real DOM is manipulated and improves the performance of the application.
Platform Agnostic - The concept of Virtual DOM is platform-independent. It can be used in environments outside the browser. For example, React Native for Mobile Apps.
Memory Usage - The Virtual DOM is stored in the runtime memory of the application. Its performance benefit however outweighs this overhead.
Diffing Algorithm - The Virtual DOM uses a "diffing" Algorithm to compare the current state of the application with the previous version. Based on the "diffs", only the necessary changes are applied to the Real DOM (via a process called reconciliation). This reduces the number of direct manipulations and improves the performance of the application.

Differences Between Real DOM and Virtual DOM

The table below highlights the differences between the Real DOM and Virtual DOM.

Parameter	Real DOM	Virtual DOM
Structure	Represented as a tree of objects called nodes.	A simplified, in-memory representation of the Real DOM, used primarily by modern frameworks like react.
Manipulation and Updating	Nodes in the tree are directly manipulated. Each update triggers a re-render of the page, affecting rendering performance.	It uses a "diffing" algorithm to identify changes in a Virtual DOM tree, batches updates, and then applies them to the Real DOM in one operation.
Performance	Much slower updates due to direct DOM manipulation, causing more reflows, repaints, re-renders, and layout recalculations.	Faster updates by limiting the number of direct DOM manipulations, resulting in fewer reflows, repaints, and re-renders.
Reconciliation	No reconciliation; every change in the application state triggers an immediate Real DOM update.	Employs reconciliation algorithms to determine the minimum number of changes required.
Event Handling	Events are directly handled via the native DOM API, resulting in potentially more event listeners attached to the DOM.	Uses event delegation through a Virtual DOM wrapper, often attaching one event handler per type on a root node.
State Management	Works directly with the DOM and its real structure. Does not have an intrinsic mechanism for efficient UI state management.	Virtual DOM libraries manage state by re-rendering components only when their state or props change, enhancing efficiency.
Use Case	Best suited for static or small-scale applications with simple user interfaces.	Ideal for complex, dynamic, and large-scale applications, where performance is crucial.
Memory Usage	Memory-intensive because every DOM node holds a reference in memory, consuming more resources in complex applications.	Lightweight due to the Virtual DOM being a plain JavaScript object representation without full DOM attributes and methods.
Framework Compatibility	The traditional approach is used without additional frameworks, mainly in plain JavaScript and jQuery-based applications.	A core feature in modern JavaScript frameworks (React, Vue, etc.), leveraging Virtual DOM for efficient UI rendering.
Rendering Cycles	Each modification triggers a new rendering cycle	Batches updates and minimizes the number of rendering cycles, applying only final changes to the Real DOM.