Benchmark: Reactive fine grained with many children replace

Script Preparation code:

// Build baseline container with TOTAL_CHILDREN children (off-DOM layout path)
function makeContainer() {
  const wrap = document.createElement('div');
  document.body.appendChild(wrap);
  return wrap;
}

// Helper: make a fresh array of N new nodes (no pooling)
function makeNodes(n) {
  const a = new Array(n);
  for (let i = 0; i < n; i++) {
    const d = document.createElement('div');
    d.textContent = 'n'+i;
    a[i] = d;
  }
  return a;
}

function weightedRand() {
  const weights = [0.02, 0.5, 0.4, 0.08]; // 3, 4, 5, 6
  const nums    = [3,   4,   5,   6];

  let r = Math.random();
  let acc = 0;
  for (let i = 0; i < weights.length; i++) {
    acc += weights[i];
    if (r < acc) return nums[i];
  }
}

let randarr = Array.from({ length: 1000 }, weightedRand);
let oldNodes = makeNodes(weightedRand());
let wrap = makeContainer();  
let oldLen = oldNodes.length;
for (let i = 0; i < oldNodes.length; ++i) {
  wrap.append(oldNodes[i]);
}

Tests:

one by one manual
for (let idx=0;idx<1000;++idx) { const newNodes = makeNodes(randarr[idx]); let newLen = newNodes.length; let minLen=oldLen<newLen?oldLen:newLen,i; for (i=0;i<minLen;i++)oldNodes[i].replaceWith(newNodes[i]); for (i=minLen;i<oldLen;i++)oldNodes[i].remove(); for (i=minLen;i<newLen;i++)wrap.appendChild(newNodes[i]); oldLen = newLen; oldNodes = newNodes; }
replaceChildren mass
for (let idx = 0; idx < 1000; ++idx) { const newNodes = makeNodes(randarr[idx]); wrap.replaceChildren(...newNodes); }
replaceWith first (firstChild)
for (let idx = 0; idx < 1000; ++idx) { const newNodes = makeNodes(randarr[idx]); wrap.textContent = ""; wrap.prepend(...newNodes); }

Historical Performance Data aggregated from 10 community runs

Desktop Results:

Chrome 10 runs

one by one manual

610/s

replaceWith first (firstChild)

554/s

replaceChildren mass

547/s

Fastest: one by one manual (1.1x faster)

View exact numbers

✓ one by one manual: 610 ops/sec
• replaceWith first (firstChild): 554 ops/sec
• replaceChildren mass: 547 ops/sec

Results show median performance across all community submissions. Run this benchmark yourself to verify on your device.

Rendered benchmark preparation results:

Suite status: <idle, ready to run>

Previous results

Test case name	Result
one by one manual
replaceChildren mass
replaceWith first (firstChild)

Fastest: N/A

Slowest: N/A

Latest run results:

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

User agent: Mozilla/5.0 (Macintosh; Intel Mac OS X 10_15_7) AppleWebKit/605.1.15 (KHTML, like Gecko) Version/18.6 Safari/605.1.15

Browser/OS: Safari 18 on Mac OS X 10.15.7

View result in a separate tab

one by one manual

982/s

replaceChildren mass

843/s

replaceWith first (firstChild)

796/s

View exact numbers

Test name	Executions per second
✓ one by one manual	982 Ops/sec
replaceChildren mass	843 Ops/sec
replaceWith first (firstChild)	796 Ops/sec

Reactive fine grained with many children replace (version: 7)

Comparing performance of: `one by one manual vs replaceChildren mass vs replaceWith first (firstChild)`

Created: 11 months ago by: Registered User

Go to the latest result

one by one manual

replaceChildren mass

replaceWith first (firstChild)

Historical Performance Data aggregated from 10 community runs

Desktop Results:

Chrome 10 runs

Suite status: <idle, ready to run>

Fastest: N/A

Slowest: N/A

Reactive fine grained with many children replace (version: 7)

Comparing performance of: one by one manual vs replaceChildren mass vs replaceWith first (firstChild)

Created: 11 months ago by: Registered User

Go to the latest result

one by one manual

replaceChildren mass

replaceWith first (firstChild)

Historical Performance Data aggregated from 10 community runs

Desktop Results:

Chrome 10 runs

Suite status: <idle, ready to run>

Fastest: N/A

Slowest: N/A

Related benchmarks

Comparing performance of: `one by one manual vs replaceChildren mass vs replaceWith first (firstChild)`