MeasureThat.net

Run results for: Cherrypick replace child vs appending a document fragment

Go to the benchmark
Run details:
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
Mac OS X 10.15.7
Desktop
4 months ago
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
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)