Benchmark: innerHTML vs replaceChildren() vs removeChild()|appendChild(cloneNode())

HTML Preparation code:

<style id="CSS_Style">
  .expand-inline {
    display: block;
    padding: 0;
  }
  .expand-inline a {
    display: block;
    text-align: left;
  }
  .expand-inline a:hover {
    background-color: rgba(0, 105, 255, 0.05);
    text-decoration: none;
  }
  .pulsar-horizontal { display: inline-block; }
  .pulsar-horizontal>div {
    display: inline-block;
    width: 8px;
    height: 8px;
    padding: 2px;
    background-color: rgb(34, 136, 255);
    border-radius: 100%;
    animation-name: pulsing;
    animation-timing-function: ease-in-out;
    animation-iteration-count: infinite;
    animation-fill-mode: both;  
    animation-duration: 1s;
  }
  .pulsar-horizontal>div::nth-child(1) { animation-delay: 0s; }
  .pulsar-horizontal>div::nth-child(2) { animation-delay: 0.25s; }
  .pulsar-horizontal>div::nth-child(3) { animation-delay: 0.5s; }
  @keyframes pulsing {
    0%, 100%  {  transform: scale(0); opacity: 0.5; }
    50%       {  transform: scale(1); opacity: 1; }
  }
</style>
<template id='ELEMENTS'>
  <div class="pulsar-horizontal"><div></div><div></div><div></div></div> 
  <span class="expand-text">
    <a href="/r/IdiotsInCars/comments/vz8iju/other_driver_said_i_hit_him_technically_true_but/ig7o5tm/">continue this thread</a>
  </span>
  <a href="/r/IdiotsInCars/comments/vz8iju/other_driver_said_i_hit_him_technically_true_but/ig7o5tm/">continue this thread</a>
  <span class="deepthread expand-inline" data-comment-ids="ig7o5tm">
     <a href="/r/IdiotsInCars/comments/vz8iju/other_driver_said_i_hit_him_technically_true_but/ig7o5tm/">continue this thread</a>
     ::after
     <span class="gray">&nbsp;(3 replies)</span>
  </span> 
</template>

<div id="container">
</div>

Script Preparation code:

const template = document.getElementById('ELEMENTS').content;
var RESOURCES = {
  pulsar: 	  	template.children[0].cloneNode(true),
  pulsarStr: 	template.children[0].outerHTML,
  expand: 		template.children[1].cloneNode(true),
  expandStr:  	template.children[1].outerHTML,
  a: 			template.children[2].cloneNode(true),
  aStr:  		template.children[2].outerHTML, 
  deepthread: 	template.children[3].cloneNode(true), 
  container: 	document.getElementById('container'),
  get deepthreads() {
    return Array.from(this.container.childNodes);
  },
  deleteChildren(root) {
    while (root.firstChild) { root.lastChild.remove(); }
    return root;
  },  
  replaceChildren_append(root, ...replacements) {
    while (root.firstChild) { root.lastChild.remove(); }
    root.append(...replacements);
    return root;
  },  
  replaceChildren_appendChild(root, ...replacements) {
    while (root.firstChild) { root.lastChild.remove(); }
	for(let len=replacements.length, i=0; i<len; ++i) { root.appendChild(replacements[i]); }
    return root;
  }, 
};

for(let { container, deepthread }=RESOURCES, i = 0; i < 100; i++) {
  container.appendChild(deepthread.cloneNode(true));
}

Tests:

innerHTML
// caching vars doubles bench speed. The length of the scope chain to access values from preparation is excessive const { container, deepthreads, pulsarStr, expandStr } = RESOURCES; for(let len=deepthreads.length, i=0; i<len; ++i) { deepthreads[i].innerHTML = pulsarStr; } for(let len=deepthreads.length, i=0; i<len; ++i) { deepthreads[i].innerHTML = expandStr; } for(let len=deepthreads.length, i=0; i<len; ++i) { deepthreads[i].innerHTML = ''; } container.innerHTML = '';
removechild & appendChild(cloneNode())
// caching vars doubles bench speed. The length of the scope chain to access values from preparation is excessive const { container, deepthreads, pulsar, expand } = RESOURCES; for(let child, dt, len=deepthreads.length, i=0; i<len; ++i) { (dt = deepthreads[i]); while ((child=dt.lastChild)!==null) { child.remove(); } dt.appendChild(pulsar.cloneNode(true)); } for(let child, dt, len=deepthreads.length, i=0; i<len; ++i) { (dt = deepthreads[i]); while ((child=dt.lastChild)!==null) { child.remove(); } dt.appendChild(expand.cloneNode(true)); } for(let child, dt, len=deepthreads.length, i=0; i<len; ++i) { (dt = deepthreads[i]); while ((child=dt.lastChild)!==null) { child.remove(); } } for(let child; (child=container.lastChild)!==null; ) { child.remove() }
replaceChildren
// caching vars doubles bench speed. The length of the scope chain to access values from preparation is excessive const { container, deepthreads, pulsar, expand } = RESOURCES; for(let len=deepthreads.length, i=0; i<len; ++i) { deepthreads[i].replaceChildren(pulsar.cloneNode(true)); } for(let len=deepthreads.length, i=0; i<len; ++i) { deepthreads[i].replaceChildren(expand.cloneNode(true)); } for(let len=deepthreads.length, i=0; i<len; ++i) { deepthreads[i].replaceChildren(); } container.replaceChildren();
Custom deleteChildren
// caching vars doubles bench speed. The length of the scope chain to access values from preparation is excessive const { container, deepthreads, pulsar, expand, deleteChildren } = RESOURCES; for(let len=deepthreads.length, i=0; i<len; ++i) { deleteChildren(deepthreads[i]).appendChild(pulsar.cloneNode(true)); } for(let len=deepthreads.length, i=0; i<len; ++i) { deleteChildren(deepthreads[i]).appendChild(expand.cloneNode(true)); } for(let len=deepthreads.length, i=0; i<len; ++i) { deleteChildren(deepthreads[i]); } deleteChildren(container);
Custom replaceChildren via append
// caching vars doubles bench speed. The length of the scope chain to access values from preparation is excessive const { container, deepthreads, pulsar, expand, replaceChildren_append } = RESOURCES; for(let len=deepthreads.length, i=0; i<len; ++i) { replaceChildren_append(deepthreads[i], pulsar.cloneNode(true)); } for(let len=deepthreads.length, i=0; i<len; ++i) { replaceChildren_append(deepthreads[i], expand.cloneNode(true)); } for(let len=deepthreads.length, i=0; i<len; ++i) { replaceChildren_append(deepthreads[i]); } replaceChildren_append(container);
Custom replaceChildren via appendChild
// caching vars doubles bench speed. The length of the scope chain to access values from preparation is excessive const { container, deepthreads, pulsar, expand, replaceChildren_appendChild } = RESOURCES; for(let len=deepthreads.length, i=0; i<len; ++i) { replaceChildren_appendChild(deepthreads[i], pulsar.cloneNode(true)); } for(let len=deepthreads.length, i=0; i<len; ++i) { replaceChildren_appendChild(deepthreads[i], expand.cloneNode(true)); } for(let len=deepthreads.length, i=0; i<len; ++i) { replaceChildren_appendChild(deepthreads[i]); } replaceChildren_appendChild(container);

Rendered benchmark preparation results:

Suite status: <idle, ready to run>

Previous results

Test case name	Result
innerHTML
removechild & appendChild(cloneNode())
replaceChildren
Custom deleteChildren
Custom replaceChildren via append
Custom replaceChildren via appendChild

Fastest: N/A

Slowest: N/A

Autogenerated LLM Summary (model llama3.2:3b, generated one month ago):

LLMs can make mistakes. Check important info.

Based on the provided benchmark results, I'll try to provide some insights.

**Overall Observations:**

1. The browser used is Chrome 105, which has relatively high execution frequencies (up to 1781610.5 executions per second).
2. The tests are running on a desktop platform.
3. The Operating System is Windows.

**Test Results:**

Here's a summary of the test results:

| Test Name | Raw UA String | Browser | Device Platform | Operating System | Executions/Second |
| --- | --- | --- | --- | --- | --- |
| removechild & appendChild(cloneNode()) | ... | Chrome 105 | Desktop | Windows | 1802023.0 |
| Custom replaceChildren via appendChild | ... | Chrome 105 | Desktop | Windows | 1784884.125 |
| Custom deleteChildren | ... | Chrome 105 | Desktop | Windows | 1781610.5 |
| Custom replaceChildren via append | ... | Chrome 105 | Desktop | Windows | 1545712.375 |
| Custom replaceChildren via appendChild | ... | Chrome 105 | Desktop | Windows | 1221093.75 |
| innerHTML | ... | Chrome 105 | Desktop | Windows | 1187230.0 |
| replaceChildren | ... | Chrome 105 | Desktop | Windows | 1164215.0 |

**Insights:**

1. The "removechild & appendChild(cloneNode())" test has the highest execution frequency, suggesting that this operation is relatively efficient.
2. Both custom tests ("Custom replaceChildren via appendChild" and "Custom deleteChildren") have lower execution frequencies compared to the other tests, which might indicate some overhead or complexity in these operations.
3. The "innerHTML" test has a relatively high execution frequency (1187230.0), suggesting that this operation is also efficient.
4. The "replaceChildren" test has an average execution frequency around 1164215.0, which is lower than the custom tests but still relatively high.

**Conclusion:**

Without more context or information about the specific use cases and requirements of these tests, it's challenging to provide a definitive answer. However, based on the benchmark results, we can conclude that:

* The "removechild & appendChild(cloneNode())" test is relatively efficient.
* Custom tests ("Custom replaceChildren via appendChild" and "Custom deleteChildren") have some overhead or complexity, but their execution frequencies are still respectable.
* Other tests, like "innerHTML", are also efficient.

If you'd like to provide more context about the specific use cases and requirements of these tests, I'd be happy to help further.

Latest run results:

Run details: (Test run date: 2 years ago)

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

Browser/OS: Chrome 105 on Windows

View result in a separate tab

Test name	Executions per second
innerHTML	1221093.8 Ops/sec
removechild & appendChild(cloneNode())	1802023.0 Ops/sec
replaceChildren	1187230.0 Ops/sec
Custom deleteChildren	1781610.5 Ops/sec
Custom replaceChildren via append	1545712.4 Ops/sec
Custom replaceChildren via appendChild	1784884.1 Ops/sec

Related benchmarks:

innerHTML vs replaceChildren() vs removeChild()|appendChild(cloneNode()) (version: 0)

Comparing performance of: innerHTML vs removechild & appendChild(cloneNode()) vs replaceChildren vs Custom deleteChildren vs Custom replaceChildren via append vs Custom replaceChildren via appendChild

Created: 2 years ago by: Registered User

Jump to the latest result

innerHTML

removechild & appendChild(cloneNode())

replaceChildren

Custom deleteChildren

Custom replaceChildren via append

Custom replaceChildren via appendChild

Suite status: <idle, ready to run>

Experimental features:

Fastest: N/A

Slowest: N/A

Autogenerated LLM Summary (model llama3.2:3b, generated one month ago):