HTML Preparation code:
AخA
 
1
<div id='test-element'></div>
Script Preparation code:
x
 
var elements = [document.createElement('div'), document.createElement('div')];
var fragment = document.createDocumentFragment();
var container = document.getElementById('test-element');
elements.forEach(element => fragment.appendChild(element));
container.appendChild(fragment);
Tests:
  • Cherrypick append child

     
    var changeIndex = 1;
    elements[changeIndex] = document.createElement('div');
    container.replaceChild(elements[changeIndex], container.children[changeIndex]);
  • Using documentFragment, append new & reuse old children

     
    var changeIndex = 1;
    var newChildren = document.createDocumentFragment();
    elements[changeIndex] = document.createElement('div');
    elements.forEach(element => newChildren.appendChild(element));
    while(container.firstChild) {
        container.firstChild.remove(); 
    }
    container.appendChild(newChildren)
  • replaceChildren method

     
    var changeIndex = 1;
    elements[changeIndex] = document.createElement('div');
    container.replaceChildren(elements)
Rendered benchmark preparation results:

Suite status: <idle, ready to run>

Previous results

Experimental features:

  • Test case name Result
    Cherrypick append child
    Using documentFragment, append new & reuse old children
    replaceChildren method

    Fastest: N/A

    Slowest: N/A

Latest run results:
Run details: (Test run date: 4 months ago)
Mozilla/5.0 (Macintosh; Intel Mac OS X 10_15_7) AppleWebKit/605.1.15 (KHTML, like Gecko) Version/17.6 Safari/605.1.15
Safari 17 on Mac OS X 10.15.7
View result in a separate tab
Test name Executions per second
Cherrypick append child 765693.4 Ops/sec
Using documentFragment, append new & reuse old children 400501.4 Ops/sec
replaceChildren method 813957.1 Ops/sec