Run results for: Fragment vs ReactDOM vs jQuery3.7.1

Run details:

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: Chrome 131

Operating system: Windows

Device Platform: Desktop

Date tested: 3 months ago

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

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

Run results for: Fragment vs ReactDOM vs jQuery3.7.1

Native

React

jQuery3.7.1