Benchmark: innerhtml vs removechild

HTML Preparation code:

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

Script Preparation code:

var node = document.getElementById('container');

for(var i = 0; i < 1000; 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 piece of HTML and JavaScript!

After analyzing the code, I can tell you that the test is trying to measure the performance of removing a child node and appending a new child node to an element.

Here's what's happening:

1. The `node` variable represents a DOM node (in this case, an HTML element).
2. The `img` variable represents an image element.
3. The line `while(node.firstChild) { ... }` removes all existing child nodes from the `node`.
4. The line `node.appendChild(img)` appends the `img` element as a new child node to the `node`.

The test is likely verifying that removing all existing child nodes and then appending a new one has a minimal impact on performance, compared to not doing anything.

To improve this code, I'd suggest the following optimizations:

1. **Use `Node.insertBefore()` instead of `appendChild()`:** This method can be faster because it doesn't need to traverse the DOM tree as much.
2. **Avoid using `while` loops when possible:** They can lead to slower performance due to the overhead of checking for the existence of child nodes.
3. **Consider using a more efficient data structure:** If you're working with a large number of elements, using an array or other data structure might be faster than using DOM nodes.

Here's an updated version of the code that incorporates these suggestions:
```javascript
node.insertBefore(img, node.firstChild);
```
This should provide better performance and accuracy for this particular test case. However, without more information about your specific use case and requirements, it's difficult to make further recommendations.

Latest run results:

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

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

Browser/OS: Chrome 104 on Mac OS X 10.14.6

View result in a separate tab

Test name	Executions per second
innerHTML	15238.7 Ops/sec
removeChild appendChild	19262.6 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):