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

Run details:

User agent: Mozilla/5.0 (Windows NT 10.0; Win64; x64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/134.0.0.0 Safari/537.36 Edg/134.0.0.0

Browser: Chrome 134

Operating system: Windows

Device Platform: Desktop

Date tested: one month ago

Test name	Executions per second
innerHTML	57.0 Ops/sec
createContextualFragment - replaceChildren	25.9 Ops/sec
createContextualFragment - replace whole div	37.6 Ops/sec
cloneNode(true) - replace whole div	110.5 Ops/sec
cloneNode(true) - clear with innerHTML	41.3 Ops/sec
createContextualFragment - clear with innerHTML	29.2 Ops/sec

HTML Preparation code:

<html>
  <body>
    <div id="container">
    </div>
    <body>
  <html>

Script Preparation code:

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

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

Test speed of createContextualFragment append nodes vs replacing innerHTML.

innerHTML

createContextualFragment - replaceChildren

createContextualFragment - replace whole div

cloneNode(true) - replace whole div

cloneNode(true) - clear with innerHTML

createContextualFragment - clear with innerHTML