Benchmark: DOM vs Virtual DOM

HTML Preparation code:

    <div id="native-container"></div>
    <div id="react-container"></div>

    <script src="https://unpkg.com/react@17/umd/react.development.js"></script>
    <script src="https://unpkg.com/react-dom@17/umd/react-dom.development.js"></script>

Script Preparation code:

// Fonction pour construire des données de test
function buildData(count) {
  var data = [];
  for (let i = 0; i < count; i++) {
    data.push(`Item ${i}`);
  }
  return data;
}

Tests:

Native
// Fonction pour mettre à jour le DOM natif function updateNativeDOM(data) { const container = document.getElementById('native-container'); container.innerHTML = ''; // Efface le contenu précédent const fragment = document.createDocumentFragment(); data.forEach(item => { const div = document.createElement('div'); div.className = 'row'; const text = document.createTextNode(item); div.appendChild(text); fragment.appendChild(div); }); container.appendChild(fragment); } // Données de test const data = buildData(1000); // Mise à jour initiale updateNativeDOM(data);
React
// Composant React pour afficher la liste const ListComponent = ({ data }) => { return React.createElement('div', { id: 'react-container' }, data.map((item, index) => React.createElement('div', { key: index, className: 'row' }, item) ) ); }; // Fonction pour mettre à jour le DOM virtuel avec React function updateVirtualDOM(data) { ReactDOM.render( React.createElement(ListComponent, { data }), document.getElementById('react-container') ); } // Données de test const reactData = buildData(1000); // Mise à jour initiale updateVirtualDOM(reactData);

Historical Performance Data aggregated from 38 community runs

Desktop Results:

Chrome 20 runs

Native

761/s

React

168/s

Fastest: Native (4.5x faster)

View exact numbers

✓ Native: 761 ops/sec
• React: 168 ops/sec

Firefox 6 runs

Native

616/s

React

138/s

Fastest: Native (4.5x faster)

View exact numbers

✓ Native: 616 ops/sec
• React: 138 ops/sec

Mobile Results:

Chrome 12 runs

Native

185/s

React

37/s

Fastest: Native (5.0x faster)

View exact numbers

✓ Native: 185 ops/sec
• React: 37 ops/sec

Results show median performance across all community submissions. Run this benchmark yourself to verify on your device.

Rendered benchmark preparation results:

Suite status: <idle, ready to run>

Previous results

Test case name	Result
Native
React

Fastest: N/A

Slowest: N/A

Latest run results:

Run details: (Test run date: 11 months ago)

User agent: Mozilla/5.0 (Windows NT 10.0; Win64; x64; rv:140.0) Gecko/20100101 Firefox/140.0

Browser/OS: Firefox 140 on Windows

View result in a separate tab

Native

424/s

React

107/s

View exact numbers

Test name	Executions per second
✓ Native	424 Ops/sec
React	107 Ops/sec

Autogenerated LLM Summary (model llama3.2:3b, generated one year ago):

LLMs can make mistakes. Check important info.

Let's dive into the explanation.

**Benchmark Purpose**

The provided benchmark compares the performance of two approaches: updating the native DOM and using React to update the virtual DOM.

**Native DOM vs Virtual DOM**

In traditional web development, when you modify the DOM, JavaScript creates a new DOM tree, which can lead to slower performance as the browser needs to re-render the entire page. In contrast, React uses a virtual DOM (a lightweight in-memory representation of the real DOM) to optimize updates.

**Options Compared**

The benchmark compares two options:

1. **Native DOM**: Updates the native DOM directly using JavaScript's `document` object.
2. **React**: Uses React's `ReactDOM.render` method to update the virtual DOM and then uses React's `createElement` function to render the actual DOM elements.

**Pros and Cons**

**Native DOM:**

Pros:

* Simple and straightforward approach
* No additional library dependencies

Cons:

* Can lead to slower performance due to re-rendering the entire page
* May cause layout thrashing (repeatedly updating and re-rendering the same DOM elements)

**React:**

Pros:

* Optimized for updates, reducing the number of re-renders
* Better suited for complex, data-driven applications

Cons:

* Requires additional library dependencies
* Can introduce overhead due to the virtual DOM

**Library Used in React Benchmark**

The benchmark uses React version 17 and its associated libraries (React DOM) to update the virtual DOM.

**Special JS Feature/ Syntax**

None mentioned in this benchmark. However, it's worth noting that React introduced some syntax features like JSX (JavaScript XML) which can be used to write more concise and efficient code. But for simplicity, we will assume this benchmark uses plain JavaScript functions.

**Other Alternatives**

There are other libraries and frameworks that optimize DOM updates, such as:

* Angular: A popular JavaScript framework for building complex web applications.
* Vue.js: Another popular JavaScript framework for building user interfaces.
* Preact: A lightweight alternative to React, designed for optimal performance.
* Lit: A modern JavaScript library for building fast, reusable UI components.

These alternatives might be worth exploring if you're interested in optimizing DOM updates or want to compare their performance with React.

DOM vs Virtual DOM (version: 0)

Comparing performance of: `Native vs React`

Created: 2 years ago by: Guest

Go to the latest result

Native

React

Historical Performance Data aggregated from 38 community runs

Desktop Results:

Chrome 20 runs

Firefox 6 runs

Mobile Results:

Chrome 12 runs

Suite status: <idle, ready to run>

Fastest: N/A

Slowest: N/A

Autogenerated LLM Summary (model llama3.2:3b, generated one year ago):

DOM vs Virtual DOM (version: 0)

Comparing performance of: Native vs React

Created: 2 years ago by: Guest

Go to the latest result

Native

React

Historical Performance Data aggregated from 38 community runs

Desktop Results:

Chrome 20 runs

Firefox 6 runs

Mobile Results:

Chrome 12 runs

Suite status: <idle, ready to run>

Fastest: N/A

Slowest: N/A

Autogenerated LLM Summary (model llama3.2:3b, generated one year ago):

Related benchmarks

Comparing performance of: `Native vs React`