Run results for: DOM vs Virtual DOM

Run details:

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

Browser: Chrome 120

Operating system: Windows

Device Platform: Desktop

Date tested: 2 years ago

Native

576/s

React

125/s

View exact numbers

Test name	Executions per second
✓ Native	576 Ops/sec
React	125 Ops/sec

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