How Virtual DOM works and its performance optimization mechanisms

by

Virtual DOM working principle and performance optimization

I. Introducing the Concept

The Virtual DOM is a lightweight, in-memory abstraction of the DOM tree maintained by React . Essentially, it’s a JavaScript object simulation of the real DOM, containing core information such as the DOM’s structure, attributes, and content. It acts as an “in-memory DOM proxy,” allowing React to perform UI state calculations and updates without directly manipulating the real DOM .

II. Throwing out the background

Real DOM manipulation is one of the core bottlenecks in browser performance:

  • Every time the browser directly manipulates the real DOM, it needs to perform a reflow (DOM structure changes cause layout recalculation) or a repaint (style changes cause pixels to be re-rendered), both of which are very time-consuming.
  • If there are frequent and numerous DOM operations in the business scenario (such as list rendering and frequent state updates), directly manipulating the real DOM will cause page lag and seriously affect the user experience.

The virtual DOM was created to reduce the number of operations on the real DOM . By using “in-memory calculation of differences + batch updates of the real DOM”, it reduces the overhead of browser reflow/repaint, thereby improving application performance.

III. Implementation Process (Core Working Principle)

The virtual DOM workflow can be divided into four steps , forming a closed loop of “initialization → update → diff → real DOM synchronization”:

  1. Initialization: Building the Virtual DOM Tree . During the initial render, React converts the structure, attributes, and other information of the real DOM into a virtual DOM tree composed of JavaScript objects and stores it in memory. For example, the real DOM <div class="box">Hello</div>is simulated as similar { type: 'div', props: { className: 'box' }, children: 'Hello' }objects.
  2. State Update: Generating a New Virtual DOM Tree When a component’s state propsor statecondition changes, React generates a new virtual DOM tree based on the new state .
  3. Difference Calculation (Diff Algorithm): React uses an efficient diff algorithm to compare the “old and new virtual DOM trees” and identify the parts that have changed only (i.e., “difference patches”). The core optimization strategies of the diff algorithm include:
    • Layered comparison : Only nodes at the same level are compared. If the nodes are at different levels, the old node is deleted and a new node is rebuilt (avoiding complex comparisons across levels).
    • Comparison of nodes of the same type : If the node types are the same (e.g., both are <div>), then compare them propswith their child nodes; if the types are different, then treat them as “new nodes”.
    • Key identifier optimization : For list-type nodes (such as mapgenerated elements), keythe “uniqueness” of the node is identified by an attribute, allowing React to accurately identify the “addition, deletion, and movement” of nodes and avoid unnecessary reordering.
  4. Applying Differences: Synchronizing to the Real DOM. React updates the real DOM in batches with the “difference patches” calculated by the diff algorithm , modifying only the “changed parts” rather than the entire DOM tree, thereby minimizing the overhead of reflow/repaint.

IV. Additional Details

  1. The “Additional Overhead” of the Virtual DOM : The virtual DOM is not always faster than directly manipulating the real DOM . For example, in simple “single DOM modification” scenarios (such as changing only the text of a button), the virtual DOM’s “diff calculation + batch update” can actually incur additional memory and computational overhead. However, in complex, frequently updated scenarios (such as rendering large lists or multi-state interactions), its advantage of “reducing the number of real DOM operations” becomes amplified.
  2. Details of the “key” in the diff algorithm : When rendering a list, the key keymust be a stable and unique identifier (such as the data itself id), not an “array index”. If an index is used key, React will misjudge node changes when the list is “added, deleted, or sorted”, leading to unnecessary re-rendering and actually reducing performance.

V. Best Practices (Extension of Performance Optimization Mechanisms)

To fully leverage the performance advantages of the virtual DOM, the following practices can be combined:

  • keyUse attributes appropriately : When rendering a list, prioritize using the unique identifier of the data (such as index id) keyto avoid misjudgment of diff caused by index.
  • Break down the component granularity : Break down the UI into finer components to minimize the “scope of influence when state changes”, thus reducing the workload of the diff algorithm.
  • Leverage caching and shallow comparisons : Implement shallow comparisons of props through React.memo(functional components) or PureComponent(class components) to avoid meaningless re-rendering; combine and cache calculation results or callback functions to reduce unnecessary function creation and property changes.useMemouseCallback

In summary, the virtual DOM significantly reduces the operational overhead of the real DOM through the process of “in-memory abstraction → diff calculation → batch update of the real DOM”. Furthermore, the optimization practices surrounding the diff algorithm, component splitting, and caching strategies further enhance its performance advantages, making it one of the core cornerstones of React’s “efficient UI rendering”.

Regarding the Virtual DOM, I will give you a clear overview from the following aspects: core concepts, problems solved, workflow, key details, and optimization practices :

1. Core Concepts

The Virtual DOM is a lightweight DOM abstraction maintained by React in memory . Essentially, it uses JavaScript objects to simulate the structure, properties, and content of the real DOM (for example, a DOM object <div>might be represented as a DOM object {type: 'div', props: {}, children: []}). It acts as a “memory proxy,” allowing React to calculate UI changes without directly manipulating the real DOM.

2. Background appears

The core issue is addressing the performance bottleneck of “real DOM manipulation”—real DOM manipulation triggers browser reflow/repaint, both of which are time-consuming. Frequent and extensive DOM modifications (such as list updates or multi-state interactions) can cause page lag by directly manipulating the real DOM. The core goal of virtual DOM is to reduce the number of real DOM operations by using “memory computation differences + batch updates” to reduce performance overhead.

3. Core Workflow (Four-Step Closed Loop)

① Initialization: During the initial render, React converts the real DOM structure into an initial virtual DOM tree and stores it in memory; ② State Update: When component props/state change, React generates a new virtual DOM tree based on the new state ; ③ Difference Calculation (Diff Algorithm): Compares the old and new virtual DOM trees to find the “only changed parts” (diff patches). The core optimizations of diff are threefold: – Layered comparison: Only compares nodes at the same level; cross-level comparisons directly delete the old and rebuild; – Comparison of nodes of the same type: Only compare props and child nodes of the same type; different types are directly treated as new nodes; – Key identification: List rendering uses a unique key (such as data ID) to help React accurately identify node additions, deletions, modifications, and queries, avoiding misjudgments; ④ Batch Synchronization: React updates the calculated “diff patches” to the real DOM in batches , only changing the changed parts, rather than redrawing the entire DOM.

4. Key Details (Objective Understanding)

  • The virtual DOM is not “faster in all scenarios”: for simple, single DOM modifications (such as changing the text on a button), its diff calculation actually incurs a slight additional overhead; however, in complex, frequently updated scenarios (such as large lists and multi-state linkages), the advantage of “reducing real DOM operations” is amplified.
  • The importance of keys: Array indices cannot be used as keys! Otherwise, when adding, deleting, or sorting the list, React will misjudge the changes in nodes, leading to unnecessary re-rendering and actually reducing performance. Stable and unique identifiers (such as data IDs) must be used.

5. Practical Optimization Practices

To leverage the performance advantages of the virtual DOM, the following operations are typically used in actual development:

  • Use keys appropriately: prioritize using unique data IDs when rendering lists;
  • Break down the component granularity: break the UI down into smaller components to minimize the impact of state changes and reduce the amount of diff calculations;
  • Utilize the caching API: perform shallow prop comparisons using React.memo(functional components) and PureComponent(class components) to avoid meaningless re-rendering; useMemocache calculation results and useCallbackcallback functions to reduce unnecessary property changes.

In summary, the core value of the Virtual DOM lies in “memory abstraction + efficient diffing + batch updates,” which balances the development efficiency and rendering performance of complex UIs and is one of the core cornerstones of React’s efficient rendering.