MeasureThat.net

Run results for: createContextualFragment vs innerHMTL - w/ Dom Destroy and Replace

Test speed of createContextualFragment append nodes vs replacing innerHTML.

Go to the benchmark
Run details:
Mozilla/5.0 (Windows NT 10.0; Win64; x64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/108.0.0.0 Safari/537.36
Chrome 108
Windows
Desktop
17 days ago
Test name Executions per second
RDFYjolf 1.0 Ops/sec
if(now()=sysdate(),sleep(15),0) 1.0 Ops/sec
RDFYjolf 1.0 Ops/sec
RDFYjolf 1.0 Ops/sec
RDFYjolf 1.0 Ops/sec
RDFYjolf 1.0 Ops/sec
HTML Preparation code:
AخA
 
1
<html>
2
  <body>
3
    <div id="container">
4
    </div>
5
    <body>
6
  <html>
Script Preparation code:
​x
 
var str = `<div>${Math.random().toString().slice(2)}</div>`;
var container = document.getElementById("container");
var res = '';
var temp = document.createElement('template')
for(i=0; i<30000; i++){
    res += str
}
temp.innerHTML = res;
​
var div = document.createElement('div')
container.appendChild(div);
div.innerHTML = res;
Tests:

  • innerHTML

     
    div.innerHTML = res;

  • createContextualFragment - replaceChildren

     
    const template = document.createRange().createContextualFragment(res);
    div.replaceChildren(template);

  • createContextualFragment - replace whole div

     
    const newDiv = div.cloneNode(false);
    const template = document.createRange().createContextualFragment(res);
    newDiv.appendChild(template);
    div.parentNode.replaceChild(newDiv, div);
    div = newDiv;

  • cloneNode(true) - replace whole div

     
    const newDiv = div.cloneNode(false);
    newDiv.append(temp.content.cloneNode(true));
    div.parentNode.replaceChild(newDiv, div);
    div = newDiv;

  • cloneNode(true) - clear with innerHTML

     
    div.innerHTML = "";
    div.append(temp.content.cloneNode(true));

  • createContextualFragment - clear with innerHTML

     
    div.innerHTML = "";
    const template = document.createRange().createContextualFragment(res);
    div.appendChild(template);