Benchmark: Fragment vs ReactDOM vs jQuery3.7.1

HTML Preparation code:

    <div id="native-container"></div>
    <div id="react-container"></div>
	<div id="jquery-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 src="https://code.jquery.com/jquery-3.7.1.min.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);
jQuery3.7.1
function updatejQuerylDOM(data){ const $container = $('#jquery-container'); $container.empty(); data.forEach(item => { const $div = $('<div></div>').addClass('row').text(item); $container.append($div); }); } const jQueryData = buildData(1000); updatejQuerylDOM(jQueryData);

Rendered benchmark preparation results:

Suite status: <idle, ready to run>

Previous results

Test case name	Result
Native
React
jQuery3.7.1

Fastest: N/A

Slowest: N/A

Latest run results:

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

User agent: Mozilla/5.0 (Windows NT 10.0; Win64; x64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/131.0.0.0 Safari/537.36

Browser/OS: Chrome 131 on Windows

View result in a separate tab

Test name	Executions per second
Native	1188.1 Ops/sec
React	177.7 Ops/sec
jQuery3.7.1	162.7 Ops/sec

Autogenerated LLM Summary (model gpt-4o-mini, generated 3 months ago):

LLMs can make mistakes. Check important info.

This benchmark compares three different approaches for rendering data into the DOM (Document Object Model) in a web environment: using native JavaScript, React, and jQuery (version 3.7.1). Each test case measures the performance of these methods when handling a list of 1,000 items.

### Options Compared

1. **Native JavaScript** ("Native"):
   - **Implementation**: The benchmark uses the Document Object Model (DOM) API directly to create and manipulate elements. It constructs a document fragment, improves performance by reducing reflows and repaints, and appends elements to the page.
   - **Pros**:
     - Minimal overhead since it uses plain JavaScript without any libraries.
     - Generally faster for simple operations as there is no additional abstraction.
   - **Cons**:
     - More code to handle updates compared to frameworks like React or jQuery.
     - Can become complex with larger applications as state management needs to be handled manually.

2. **React** ("React"):
   - **Implementation**: This test case defines a functional React component (`ListComponent`) to render the list. The component leverages React's virtual DOM for efficient updates, minimizing actual DOM manipulations.
   - **Pros**:
     - React manages the state and efficiently updates only parts of the DOM that change, enhancing performance for complex UIs.
     - Reusable components simplify the code, especially in larger applications.
   - **Cons**:
     - The overhead introduced by the React library can slow down rendering for simple tasks, as shown in the benchmark results.
     - Additional learning curve for developers, particularly in understanding concepts like hooks and state management.

3. **jQuery** ("jQuery3.7.1"):
   - **Implementation**: In this approach, the jQuery library is employed to manipulate the DOM. It creates elements and updates the container using its built-in methods, like `append()`.
   - **Pros**:
     - Simplifies DOM manipulation with a rich set of features that make it easier to work with events, animations, and AJAX.
     - Well-known and widely used, which may reduce the learning curve for developers familiar with jQuery.
   - **Cons**:
     - Performance can lag behind native JavaScript due to the overhead of the library functions.
     - Since the rise of frameworks like React and Vue, jQuery is sometimes viewed as outdated for new projects focused on modern approaches.

### Benchmark Results Summary
The results show that:
- The Native implementation has the highest performance with **1188.05 executions per second**.
- React trails significantly, scoring **177.68 executions per second**.
- jQuery is close behind React at **162.67 executions per second**.

### Other Considerations and Alternatives
- **Performance**: The benchmark highlights that for simple DOM manipulations, native JavaScript tends to outperform libraries that add abstraction layers. Therefore, for straightforward tasks, developers might prefer direct manipulation via vanilla JavaScript.
- **Scalability**: While native DOM updates are fast, as projects grow in complexity, using a library like React or a virtual DOM library can simplify management of changing states and enhance maintainability.
- **Alternative Libraries/frameworks**: In addition to React and jQuery, other frameworks like Vue.js, Svelte, and Angular might be considered based on project requirements, skills of developers, and intended application complexity.
- **Real-world Applications**: The selection of technology can also depend on the nature of the project. For simple sites, a lightweight solution using native JavaScript might suffice, whereas for larger, more interactive applications, using React or something similar would be beneficial despite a slight performance trade-off.

In summary, when choosing between these approaches, consider the complexities of your application, the team's familiarity with the technology, and performance requirements.

Related benchmarks:

Fragment vs ReactDOM vs jQuery3.7.1 (version: 1)

Comparing performance of: Native vs React vs jQuery3.7.1

Created: 3 months ago by: Guest

Jump to the latest result

Native

React

jQuery3.7.1

Suite status: <idle, ready to run>

Experimental features:

Fastest: N/A

Slowest: N/A

Autogenerated LLM Summary (model gpt-4o-mini, generated 3 months ago):