Benchmark: DOM manipulation vs innerhtml (corrected)

HTML Preparation code:

<div id="root"></div>

Tests:

innerHTML
let root = document.querySelector('#root') id = '4/4b809ca8-b600-a286-62b6-83a6a5fc4310'; style = "left: 0px; top: 0px; white-space: nowrap;"; root.innerHTML = `<div id=${id} style=${style}>0</div>`; a = root.chi root.innerHTML = ''
DOM manipulation
let root = document.querySelector('#root') let itemBox = document.createElement('div') itemBox.id = "4/4b809ca8-b600-a286-62b6-83a6a5fc4310" itemBox.style = "left: 0px; top: 0px; white-space: nowrap;" itemBox.innerHTML = `0` root.appendChild(itemBox) root.removeChild(itemBox)

Rendered benchmark preparation results:

Suite status: <idle, ready to run>

Previous results

Test case name	Result
innerHTML
DOM manipulation

Fastest: N/A

Slowest: N/A

Latest run results:

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

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

Browser/OS: Chrome 90 on Windows

View result in a separate tab

Test name	Executions per second
innerHTML	71148.1 Ops/sec
DOM manipulation	79518.8 Ops/sec

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

LLMs can make mistakes. Check important info.

Let's dive into the explanation of the benchmark test.

**What is being tested?**

The benchmark tests two approaches for updating content on a DOM (Document Object Model) element: using `innerHTML` and using DOM manipulation (e.g., `appendChild`, `innerHTML`, `removeChild`). The goal is to determine which approach is faster and more efficient.

**Options compared**

There are only two options being compared:

1. **innerHTML**: This approach uses the `innerHTML` property of an HTML element to update its content. It sets the entire content of the element at once, including all its child elements.
2. **DOM manipulation**: This approach involves creating and manipulating individual DOM elements to update the content. It appends a new element to the original element and then removes it.

**Pros and Cons**

**innerHTML**

Pros:

* Easier to implement and understand
* Reduces the number of DOM operations, which can lead to improved performance

Cons:

* Can be slower due to the overhead of parsing and setting the entire content at once
* May cause issues with element layout and formatting if not used correctly

**DOM manipulation**

Pros:

* Can provide better control over element layout and formatting
* Allows for more granular updates, which can lead to improved performance in certain scenarios

Cons:

* More complex and harder to understand
* Requires more DOM operations, which can be slower

**Other considerations**

The benchmark also tests the **DevicePlatform**, **OperatingSystem**, and **ExecutionsPerSecond** values, which provide additional information about the test environment. However, these values are not directly related to the performance comparison between `innerHTML` and DOM manipulation.

**Library usage**

There is no library used in this benchmark.

**Special JS feature or syntax**

The benchmark uses modern JavaScript features such as template literals (`<div id=${id} style=${style}>`) and the `let` keyword for variable declaration. These features are widely supported by most modern browsers, including Chrome 90.

**Alternatives**

Other alternatives to testing DOM updates include:

* **Using a different rendering engine**: Testing with a different rendering engine, such as Blink (used by Google Chrome), can help determine whether any differences in performance are due to the specific engine.
* **Testing with a larger number of elements**: Increasing the size of the DOM element being updated can provide more insight into the performance characteristics of each approach.
* **Using a profiling tool**: Profiling tools, such as the Chrome DevTools, can provide more detailed information about CPU and memory usage for each test case.
* **Comparing with other update methods**: Testing with alternative update methods, such as using `setInnerHTML` or `textContent`, can help determine which method is most efficient.

Related benchmarks:

DOM manipulation vs innerhtml (corrected) (version: 0)

Comparing performance of: innerHTML vs DOM manipulation

Created: 3 years ago by: Registered User

Jump to the latest result

innerHTML

DOM manipulation

Suite status: <idle, ready to run>

Experimental features:

Fastest: N/A

Slowest: N/A

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