Run results for: Reactive fine grained with many children replace

Run details:

User agent: Mozilla/5.0 (Macintosh; Intel Mac OS X 10_15_7) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/139.0.0.0 Safari/537.36

Browser: Chrome 139

Operating system: Mac OS X 10.15.7

Device Platform: Desktop

Date tested: 11 months ago

replaceChildren mass

547/s

one by one manual

483/s

replaceWith first (firstChild)

2/s

View exact numbers

Test name	Executions per second
✓ replaceChildren mass	547 Ops/sec
one by one manual	483 Ops/sec
replaceWith first (firstChild)	2 Ops/sec

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