Benchmark: innerhtml vs removechild

HTML Preparation code:

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

Script Preparation code:

var node = document.getElementById('container');

for(var i = 0; i < 3; i++) node.appendChild(document.createElement('div'));

Tests:

innerHTML
var node = document.getElementById('container'); node.innerHTML = '<img src="data:image/png;base64,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" alt="📀">';
removeChild appendChild
var node = document.getElementById('container') var img = new Image() img.src = 'data:image/png;base64,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' img.alt = '📀' while(node.firstChild) node.removeChild(node.firstChild) node.appendChild( img )

Rendered benchmark preparation results:

Suite status: <idle, ready to run>

Previous results

Test case name	Result
innerHTML
removeChild appendChild

Fastest: N/A

Slowest: N/A

Autogenerated LLM Summary (model llama3.2:3b, generated 26 days ago):

LLMs can make mistakes. Check important info.

A nice benchmark result!

It looks like we have two test results:

**RemoveChild AppendChild**

* RawUAString: `Mozilla/5.0 (Macintosh; Intel Mac OS X 10_14_2) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/71.0.3578.98 Safari/537.36`
* Browser: `Chrome 71`
* DevicePlatform: `Desktop`
* OperatingSystem: `Mac OS X 10.14.2`
* ExecutionsPerSecond: `15864.97265625`

This test result indicates that the script being benchmarked ( likely a JavaScript function or method) performs very well on this specific browser and device configuration, with an average of approximately 15,685 executions per second.

**innerHTML**

This test result shows a lower average execution rate compared to the RemoveChild AppendChild test, with approximately 10,107 executions per second.

To make an informed decision about which test result is more relevant or meaningful, I would need more context about the specific use case or requirements of the code being benchmarked. However, based on these results alone, it appears that the RemoveChild AppendChild test shows a significant performance advantage over the innerHTML test.

Latest run results:

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

User agent: Mozilla/5.0 (Macintosh; Intel Mac OS X 10_14_2) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/71.0.3578.98 Safari/537.36

Browser/OS: Chrome 71 on Mac OS X 10.14.2

View result in a separate tab

Test name	Executions per second
innerHTML	10107.1 Ops/sec
removeChild appendChild	15865.0 Ops/sec

Related benchmarks:

innerhtml vs removechild (version: 0)

Comparing performance of: innerHTML vs removeChild appendChild

Created: 7 years ago by: Guest

Jump to the latest result

innerHTML

removeChild appendChild

Suite status: <idle, ready to run>

Experimental features:

Fastest: N/A

Slowest: N/A

Autogenerated LLM Summary (model llama3.2:3b, generated 26 days ago):