# DOM vs Virtual DOM

URL: https://softwaredictionary.org/compare/dom-vs-virtual-dom
Last updated: 2026-09-30

In short: The DOM is the browser's live tree of page elements, while the virtual DOM is a light JavaScript copy that frameworks compare to decide what to change.

## What is the difference between the DOM and the virtual DOM?

The DOM (Document Object Model) is the tree of objects the browser builds from HTML, and changing it changes what appears on screen. The virtual DOM is a plain JavaScript representation of that tree, used by libraries such as React, where you describe the desired interface as objects instead of editing the page directly.

The virtual DOM exists to make UI code simpler, not to replace the DOM. When state changes, the library renders a new virtual tree, compares it with the previous one in a step called diffing or reconciliation, and applies only the necessary updates to the real DOM. You write what the page should look like, and the library works out how to change it.

The two always work together: the virtual DOM is only a plan, and the real DOM is still what the browser paints. Not every framework uses one; some compile components into code that updates the exact DOM nodes directly, or track fine-grained reactive values so no diffing is needed.

A common misconception is that the virtual DOM is faster than the DOM. Diffing is extra work on top of the real updates, so careful hand-written DOM code can be faster; the real benefit is getting predictable, reasonably fast updates without that manual effort.

| Aspect | DOM | Virtual DOM |
| --- | --- | --- |
| What it is | The browser's live tree of elements on the page | A JavaScript object tree describing the desired UI |
| Provided by | The browser, through standard web APIs | A UI library or framework, such as React |
| How you update it | Direct calls like `appendChild` or setting `textContent` | Re-render, diff against the old tree, then patch the DOM |
| Cost of a change | Can trigger layout and repaint in the browser | Cheap to create; cost comes from diffing and final patches |
| Visible on screen | Yes, it is what the browser renders | No, it exists only in memory |
| Coding style | Imperative: you say how to change the page | Declarative: you say what the page should look like |

## Choose DOM when

- The page is small and needs only a few targeted updates.
- You are writing a lightweight widget or script without a framework.
- You need exact control over performance-critical updates.

## Choose Virtual DOM when

- The interface has lots of state that changes in many places.
- You want to describe screens declaratively as components.
- Your team already uses a virtual DOM library like React.

## Frequently asked questions

**Is the virtual DOM faster than the real DOM?**

Not inherently. It adds a diffing step, but it batches and minimizes real DOM changes automatically, which is usually fast enough and much easier than optimizing every update by hand.

**Does every framework use a virtual DOM?**

No. Some frameworks compile components into direct DOM updates or track fine-grained reactive values instead, avoiding a virtual DOM entirely.

**Is the shadow DOM the same as the virtual DOM?**

No. The shadow DOM is a browser feature that isolates a component's markup and styles from the rest of the page, while the virtual DOM is a JavaScript technique libraries use to plan updates.

---

Software Dictionary: https://softwaredictionary.org/ · https://softwaredictionary.org/llms.txt