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);

Rendered benchmark preparation results:

Suite status: <idle, ready to run>

Previous results

Test case name	Result
Native
React

Fastest: N/A

Slowest: N/A

Autogenerated LLM Summary (model llama3.2:3b, generated one month 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.

Latest run results:

Run details: (Test run date: one month ago)

User agent: Mozilla/5.0 (X11; Linux x86_64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/128.0.0.0 Safari/537.36

Browser/OS: Chrome 128 on Linux

View result in a separate tab

Test name	Executions per second
Native	943.4 Ops/sec
React	124.6 Ops/sec

Related benchmarks:

DOM vs Virtual DOM (version: 0)

Comparing performance of: Native vs React

Created: 11 months ago by: Guest

Jump to the latest result

Native

React

Suite status: <idle, ready to run>

Experimental features:

Fastest: N/A

Slowest: N/A

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