Benchmark: cloneNode(true) vs innerHMTL - w/ Dom Destroy and Replace

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 temp = document.createElement('template')
var res = '';
for(i=0; i<30000; i++){
	res += str
}
temp.innerHTML = res;

var div = document.createElement('div')
container.appendChild(div);
div.innerHTML = res;

Tests:

cloneNode(true) - While -> Remove
while (div.firstChild) { div.removeChild(div.firstChild); } div.append(temp.content.cloneNode(true));
innerHTML
div.innerHTML = res;
cloneNode(true) - replaceChildren
div.replaceChildren(temp.content.cloneNode(true));
cloneNode(true) - replace whole div
const newDiv = div.cloneNode(false); newDiv.append(temp.content.cloneNode(true)); div.parentNode.replaceChild(newDiv, div); div = newDiv;

Rendered benchmark preparation results:

Suite status: <idle, ready to run>

Previous results

Test case name	Result
cloneNode(true) - While -> Remove
innerHTML
cloneNode(true) - replaceChildren
cloneNode(true) - replace whole div

Fastest: N/A

Slowest: N/A

Latest run results:

Run details: (Test run date: one year ago)

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/OS: Chrome 134 on Windows

View result in a separate tab

cloneNode(true) - replace whole div

24/s

innerHTML

9/s

cloneNode(true) - replaceChildren

4/s

cloneNode(true) - While -> Remove

3/s

View exact numbers

Test name	Executions per second
✓ cloneNode(true) - replace whole div	24 Ops/sec
innerHTML	9 Ops/sec
cloneNode(true) - replaceChildren	4 Ops/sec
cloneNode(true) - While -> Remove	3 Ops/sec

cloneNode(true) vs innerHMTL - w/ Dom Destroy and Replace (version: 2)

Test speed of clone / append nodes vs replacing innerHTML.

Comparing performance of: `cloneNode(true) - While -> Remove vs innerHTML vs cloneNode(true) - replaceChildren vs cloneNode(true) - replace whole div`

Created: one year ago by: Registered User

Go to the latest result

cloneNode(true) - While -> Remove

innerHTML

cloneNode(true) - replaceChildren

cloneNode(true) - replace whole div

Suite status: <idle, ready to run>

Fastest: N/A

Slowest: N/A

cloneNode(true) vs innerHMTL - w/ Dom Destroy and Replace (version: 2)

Test speed of clone / append nodes vs replacing innerHTML.

Comparing performance of: cloneNode(true) - While -> Remove vs innerHTML vs cloneNode(true) - replaceChildren vs cloneNode(true) - replace whole div

Created: one year ago by: Registered User

Go to the latest result

cloneNode(true) - While -> Remove

innerHTML

cloneNode(true) - replaceChildren

cloneNode(true) - replace whole div

Suite status: <idle, ready to run>

Fastest: N/A

Slowest: N/A

Related benchmarks

Comparing performance of: `cloneNode(true) - While -> Remove vs innerHTML vs cloneNode(true) - replaceChildren vs cloneNode(true) - replace whole div`