Neither is universally faster. A virtual DOM is an in-memory description that a framework uses to calculate changes; the browser still updates and displays the real DOM. Building and comparing that description has a cost, but it can help avoid unnecessary DOM operations. A narrowly targeted direct update may skip that work. The better choice depends on the update pattern, implementation, and browser workload.
What “virtual DOM vs real DOM” actually compares
The real DOM is the browser’s representation of a page. A virtual DOM (VDOM) is an in-memory representation used by some UI frameworks; it is not a replacement for the browser DOM. Vue describes the VDOM as an idealized UI representation kept in memory and synchronized with the real DOM. In Vue’s pipeline, templates are compiled into render functions, the renderer creates browser nodes, and a state change produces a new virtual tree that is compared with the previous one and patched into the real DOM. Vue’s compiler can mark static areas and dynamic descendants so runtime work can skip or narrow parts of that process. Vue: Rendering Mechanism
As an Amazon Associate I earn from qualifying purchases.
React likewise distinguishes rendering—calculating what the UI should look like—from committing necessary changes to the DOM. The browser paints after DOM updates are committed. So the meaningful comparison is between complete update strategies: calculating and reconciling a UI description before changing the DOM, versus applying known DOM changes directly. It is not a contest between a virtual page and a page that does not use the DOM. React: Render and Commit
Why the answer changes with the workload
A small, known change
If an application already knows exactly which element and property changed, a direct update can avoid the work of producing and comparing a broader UI description. That can be advantageous for a tightly scoped operation. But it is not a universal shortcut: application code still has to identify the right update and keep the interface consistent as state and interactions grow.
#1 Best Overall
A larger or less localized update
When many parts of the interface may have changed, calculating the next UI and comparing it with the previous one can help a framework limit DOM mutations to what is needed. That calculation is not free, and its cost varies with the framework, compiler optimizations, and application code. A framework’s ability to skip static regions or focus on dynamic content can materially affect the result.
What one published benchmark illustrates
Mattias Levlin’s 2020 thesis, DOM benchmark comparison of the front-end JavaScript frameworks React, Angular, Vue, and Svelte, tested React 16.12.0, Vue 2.6.11, Angular 8.2.14, and Svelte 3.20.0. Its results varied sharply by operation:
Rank #2
| Test in Levlin’s 2020 thesis | Reported averages |
|---|---|
| Single-element edit | Svelte: 0.11 ms; React: 16.58 ms; Vue: 22.23 ms |
| Editing text in 10,000 existing elements | React: 17.86 ms; Vue: 20.64 ms; Svelte: 885.03 ms; Angular: 896.76 ms |
These are measurements from that thesis’s particular implementations and environment, not a current framework ranking or a general measure of virtual DOM performance. The single-element result and the 10,000-element result point in different directions; the useful lesson is that operation size and implementation matter. Levlin thesis (2020)
The Tool Desk
Outbyte PC Repair FREEClear out junk files and repair common Windows errorsFree Scan →Outbyte Driver Updater FREEScan for outdated or missing drivers - takes under a minuteDriver Scan →A 2024 article’s accessible abstract also describes a React-versus-vanilla-JavaScript comparison and says outcomes depend on application complexity and interaction frequency. Its article page does not provide detailed benchmark tables in the available material, so it does not support precise numerical comparisons. Muppaneni article page (2024)
How to compare performance for your own app
Test the same user interaction and visible result in each implementation. Record the conditions and compare the whole update path rather than timing only one convenient step.
- Define the interaction. Is it one known element changing, a batch of changes, or an update that touches much of a screen?
- Include repeated UI work. Measure the work needed to produce the next state as well as the resulting DOM updates.
- Use the optimizations the app would ship with. Account for compiler or framework handling of static content and dynamic regions.
- Control the test conditions. Record the framework version, production or development build, browser, hardware, and measurement method.
- Measure the interface that matters. Consider mounted DOM-node count and the time for the user-visible interaction, not just an isolated update function.
When large lists are the bottleneck
A page can spend substantial time handling a large number of mounted DOM nodes, regardless of the label attached to its rendering approach. Vue recommends list virtualization for large lists; React’s legacy performance guide describes windowing as a way to reduce re-rendering time and the number of DOM nodes. These techniques keep only the relevant portion of a long list mounted. They are practical ways to address list costs, not proof that either virtual-DOM or direct-DOM rendering is inherently faster. Vue: Performance React: Optimizing Performance
Quick Recap
Rank #4
Which approach should you choose?
- Choose a framework strategy for the overall application when maintainable state-driven UI and coordinated updates matter; do not select it on the assumption that a VDOM is automatically faster.
- Consider direct DOM updates when a change is narrowly known and the application can manage it consistently.
- For either approach, profile the real bottleneck. Repeated component work, rendering, DOM-node count, and browser painting can all affect perceived speed.
Product prices and availability are accurate as of the date/time indicated and are subject to change. Any price and availability information displayed on Amazon at the time of purchase will apply.
