Zware dom

Compact view

Benchmark publishedon

Description

// 1. Setup: Maak een zware DOM-boom en CSS-regels aan document.body.innerHTML = ''; const style = document.createElement('style'); style.innerHTML = .container { display: flex; flex-wrap: wrap; width: 100%; } .box { width: 10px; height: 10px; margin: 1px; background: #eee; transition: all 0.1s; } /* Complexe selector om de CPU te laten zweten bij een recalculation */ .container.recalc .box:nth-child(even) { background: #0078d4; transform: scale(1.1); border-radius: 50%; }; document.head.appendChild(style);

const container = document.createElement('div'); container.className = 'container'; document.body.appendChild(container);

console.log("DOM bouwen met 10.000 nodes..."); for (let i = 0; i < 10000; i++) { const box = document.createElement('div'); box.className = 'box'; container.appendChild(box); }

// 2. De Benchmark: Geforceerde Style Recalculation (Read/Write cycle) setTimeout(() => { console.log("Start benchmark: 500x geforceerde Recalculate Style...");

const start = performance.now(); let dummyCalculation = 0;

for (let i = 0; i < 500; i++) { // WRITE: Pas een class aan op de parent. Dit invalideert 10.000 children direct. container.classList.toggle('recalc');

// READ: Vraag een lay-out property op. 
// Dit forceert de browser om NU alle stijlen te herberekenen (Recalculate Style) 
// in plaats van dit asynchroon te batchen.
dummyCalculation += container.lastChild.offsetHeight;

}

const end = performance.now(); const duration = Math.round(end - start);

console.log(✅ Benchmark klaar! Tijd: ${duration} ms (Lagere score is beter)); document.body.innerHTML = <div style="font-family: sans-serif; padding: 20px;"> <h1>Score: ${duration} ms</h1> <p>Vergelijk dit getal met je andere machine. Een lagere tijd betekent een snellere single-core afhandeling van DOM en CSS.</p> </div>; }, 1000);

Setup

// 1. Setup: Maak een zware DOM-boom en CSS-regels aan
document.body.innerHTML = '';
const style = document.createElement('style');
style.innerHTML = `
  .container { display: flex; flex-wrap: wrap; width: 100%; }
  .box { width: 10px; height: 10px; margin: 1px; background: #eee; transition: all 0.1s; }
  /* Complexe selector om de CPU te laten zweten bij een recalculation */
  .container.recalc .box:nth-child(even) { background: #0078d4; transform: scale(1.1); border-radius: 50%; }
`;
document.head.appendChild(style);

const container = document.createElement('div');
container.className = 'container';
document.body.appendChild(container);

console.log("DOM bouwen met 10.000 nodes...");
for (let i = 0; i < 10000; i++) {
  const box = document.createElement('div');
  box.className = 'box';
  container.appendChild(box);
}

// 2. De Benchmark: Geforceerde Style Recalculation (Read/Write cycle)
setTimeout(() => {
  console.log("Start benchmark: 500x geforceerde Recalculate Style...");
  
  const start = performance.now();
  let dummyCalculation = 0;

  for (let i = 0; i < 500; i++) {
    // WRITE: Pas een class aan op de parent. Dit invalideert 10.000 children direct.
    container.classList.toggle('recalc');
    
    // READ: Vraag een lay-out property op. 
    // Dit forceert de browser om NU alle stijlen te herberekenen (Recalculate Style) 
    // in plaats van dit asynchroon te batchen.
    dummyCalculation += container.lastChild.offsetHeight;
  }

  const end = performance.now();
  const duration = Math.round(end - start);
  
  console.log(`✅ Benchmark klaar! Tijd: ${duration} ms (Lagere score is beter)`);
  document.body.innerHTML = `
    <div style="font-family: sans-serif; padding: 20px;">
        <h1>Score: ${duration} ms</h1>
        <p>Vergelijk dit getal met je andere machine. Een lagere tijd betekent een snellere single-core afhandeling van DOM en CSS.</p>
    </div>`;
}, 1000);

Test Runner

Initializing...

Testing in
Test CaseOps/sec
Test
// 2. De Benchmark: Geforceerde Style Recalculation (Read/Write cycle)
setTimeout(() => {
  console.log("Start benchmark: 500x geforceerde Recalculate Style...");
  
  const start = performance.now();
  let dummyCalculation = 0;

  for (let i = 0; i < 500; i++) {
    // WRITE: Pas een class aan op de parent. Dit invalideert 10.000 children direct.
    container.classList.toggle('recalc');
    
    // READ: Vraag een lay-out property op. 
    // Dit forceert de browser om NU alle stijlen te herberekenen (Recalculate Style) 
    // in plaats van dit asynchroon te batchen.
    dummyCalculation += container.lastChild.offsetHeight;
  }

  const end = performance.now();
  const duration = Math.round(end - start);
  
  console.log(`✅ Benchmark klaar! Tijd: ${duration} ms (Lagere score is beter)`);
  document.body.innerHTML = `
    <div style="font-family: sans-serif; padding: 20px;">
        <h1>Score: ${duration} ms</h1>
        <p>Vergelijk dit getal met je andere machine. Een lagere tijd betekent een snellere single-core afhandeling van DOM en CSS.</p>
    </div>`;
}, 1000);
ready
T
// 2. De Benchmark: Geforceerde Style Recalculation (Read/Write cycle)
setTimeout(() => {
  console.log("Start benchmark: 500x geforceerde Recalculate Style...");
  
  const start = performance.now();
  let dummyCalculation = 0;

  for (let i = 0; i < 500; i++) {
    // WRITE: Pas een class aan op de parent. Dit invalideert 10.000 children direct.
    container.classList.toggle('recalc');
    
    // READ: Vraag een lay-out property op. 
    // Dit forceert de browser om NU alle stijlen te herberekenen (Recalculate Style) 
    // in plaats van dit asynchroon te batchen.
    dummyCalculation += container.lastChild.offsetHeight;
  }

  const end = performance.now();
  const duration = Math.round(end - start);
  
  console.log(`✅ Benchmark klaar! Tijd: ${duration} ms (Lagere score is beter)`);
  document.body.innerHTML = `
    <div style="font-family: sans-serif; padding: 20px;">
        <h1>Score: ${duration} ms</h1>
        <p>Vergelijk dit getal met je andere machine. Een lagere tijd betekent een snellere single-core afhandeling van DOM en CSS.</p>
    </div>`;
}, 1000);
ready

Revisions

You can edit these tests or add more tests to this page by appending /edit to the URL.

Revision 1
publishedon