DOM vs. Virtual DOM: key concepts explained

Web applications constantly update their UI in response to user interactions, data, and state changes. JavaScript drives these updates by manipulating the DOM—the browser's representation of the webpage.

However, frequent DOM updates can become inefficient as applications grow complex.

React addresses this challenge with the Virtual DOM. Instead of updating the real DOM immediately, React creates an in-memory representation of the UI, calculates what has changed, and applies only the necessary updates to the real DOM.

What is the DOM?

The Document Object Model (DOM) is the browser's programming interface for HTML documents.

The browser transforms a webpage into a tree of node objects that browsers and JavaScript can interact with. Through the DOM API, JavaScript can read, modify, create, and remove elements dynamically.

The DOM is made up of Node objects

The browser creates DOM objects called nodes to represent every part of a document, including elements, attributes, and text. It builds these nodes automatically when it parses HTML (or we create them manually using APIs such as document.createElement() ).

Each node stores information about the elements, including attributes, styles, relationships with other nodes, and browser-managed state. JavaScript uses these node objects to traverse the DOM tree, inspect elements, and update the webpage.

The DOM tree

The browser organizes DOM nodes into a hierarchical tree, connecting elements through parent-child relationships. JavaScript can navigate this tree to locate specific nodes and modify targeted parts of the document.

How JavaScript interacts with the DOM

JavaScript uses DOM APIs such as querySelector(), createElement(), and appendChild() to find, create, update, and remove nodes. When JavaScript changes the DOM, the browser reflects those changes in the rendered webpage.

DOM updates can be expensive

When JavaScript modifies the DOM, the browser recalculates the layout to determine how affected elements should be sized and positioned. This process, called reflow, requires the browser to recompute the arrangement of elements on the page.

After recalculating the layout, the browser repaints the affected areas to reflect visual changes.

Performing frequent small updates individually can trigger repeated reflows and repaints, which may reduce performance, especially on large or complex pages. To optimize frequent updates, developers can batch changes using document fragments.

Document fragments

A DocumentFragment provides a lightweight container for DOM nodes that exists outside the main document tree. Developers can use fragments to create, organize, and modify multiple nodes before inserting them into the DOM.

By preparing changes separately and adding them in a single operation, DocumentFragments reduce unnecessary DOM updates. However, using document fragments may lead to complexity, and it is not widely used.

The virtual DOM

The Virtual DOM is an in-memory representation of the UI that React uses during rendering. When the UI changes, React creates a new representation, compares it with the previous one, and applies the required updates to the real DOM.

React elements

While the real DOM uses browser-managed node objects, React creates React elements—lightweight JavaScript objects that describe the desired UI structure. These immutable descriptions tell React what the interface should look like without directly creating or modifying browser elements.

React generates these elements through React.createElement() or JSX, which React transforms into element creation calls.

How React uses the virtual DOM

When state or props change, React creates a new element tree that describes the updated UI. React then compares this new tree with the previous one to determine what changes are needed before updating the real DOM.

Creating the virtual DOM tree

Each React component returns React elements that React combines into a tree structure. This tree represents the UI React intends to render at a specific point in time. React uses this representation to track changes and efficiently update the corresponding parts of the real DOM.

Comparing trees

React compares the previous element tree with the new one through a process called reconciliation. During this process, React analyzes the differences between the two trees and determines which parts of the UI need to be updated.

The diffing algorithm

To efficiently compare two virtual DOM trees, React uses the diffing Algorithm.

The diffing algorithm calculates the minimum number of steps required to transform object A to object B.

For React, it means calculating the most effective way to update the old UI to the new one.

The Diffing Algorithm explanation will come in a future article.

Updating the DOM

After identifying the necessary changes, React updates only the affected DOM nodes. By applying targeted updates instead of re-rendering the entire page, React reduces unnecessary DOM operations and improves rendering efficiency.

Features of the virtual DOM

Declarative UI

The Virtual DOM lets developers define what the UI should look like using JSX rather than manually updating DOM elements. React calculates the changes and updates the real DOM to reflect the current state.

Efficient updates

The Virtual DOM allows React to calculate UI changes before modifying the real DOM. This reduces unnecessary DOM operations.

Optimized rendering

React groups multiple state updates together and processes them in a single rendering cycle. By reducing unnecessary renders and DOM operations, React minimizes expensive browser work such as layout calculations.

Component-based architecture

The Virtual DOM works together with React’s component model to manage reusable UI pieces. Components describe how the UI should render, and React tracks changes to the component tree to update the affected parts of the rendered output when data changes.

Browser abstraction

The Virtual DOM abstracts UI updates by providing a consistent way to describe and manage changes to the interface.

React separates UI description from DOM manipulation, allowing developers to focus on describing the interface rather than managing individual DOM updates.

Platform independence

Developers describe the interface using React components, and React translates those descriptions into updates for the target platform. While React commonly renders to the browser DOM, the same architecture can support other platforms, such as native mobile applications through React Native.

Key differences

Real DOM

• Consists of browser managed node objects
• Changing real DOM directly affects the webpage
• Updates can trigger browser work immediately
• Exists in the browser environment

Virtual DOM

• Consists of plain JavaScript objects
• Describes the desired UI
• Changes can be calculated before touching the DOM
• Exists inside the JavaScript runtime

Summary

The DOM is the browser's representation of a webpage, consisting of objects that JavaScript can manipulate. While the DOM enables dynamic updates, frequent direct changes can trigger expensive browser operations, such as layout recalculations and repaints.

React's Virtual DOM provides an abstraction between application code and the real DOM. Instead of immediately modifying the browser DOM, React creates lightweight JavaScript representations of the UI, compares changes through reconciliation, and applies only the necessary updates to the DOM.

The key benefits of the Virtual DOM include declarative UI development, efficient updates, component-based rendering, and a separation between describing the UI and managing DOM operations.