Benchmark: Bench InnerHTML vs CreateElement + AppendChild

HTML Preparation code:

<div id='container'></div>

Tests:

InnerHTML
const container = document.getElementById('container') container.innerHTML = '<span>I did it Mom !</span>'
CreateElement + AppendChild
const container = document.getElementById('container') const span = document.createElement('span') span.textContent = 'I did it Mom !' container.appendChild(span)

Rendered benchmark preparation results:

Suite status: <idle, ready to run>

Previous results

Test case name	Result
InnerHTML
CreateElement + AppendChild

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/128.0.0.0 Safari/537.36

Browser/OS: Chrome 128 on Windows

View result in a separate tab

Test name	Executions per second
InnerHTML	586155.9 Ops/sec
CreateElement + AppendChild	405708.5 Ops/sec

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

LLMs can make mistakes. Check important info.

Let's dive into the world of measuring JavaScript performance.

**Benchmark Purpose**

The provided benchmark measures the performance difference between two approaches for setting inner HTML in an HTML element: `innerHTML` and creating an element using `createElement` followed by appending it to the container. This is a common optimization problem, as creating and manipulating elements can be expensive in terms of performance.

**Options Compared**

Two options are compared:

1. **InnerHTML**: Using the `innerHTML` property to set the content of an HTML element.
2. **CreateElement + AppendChild**: Creating an element using the `createElement` method and then appending it to the container using the `appendChild` method.

**Pros and Cons of Each Approach**

**InnerHTML**

Pros:

* Faster, as it's a single operation that sets the content directly in the DOM.
* Less memory allocation and deallocation, which can lead to better performance.

Cons:

* May not be compatible with older browsers or environments that don't support `innerHTML`.
* Can lead to more complex error handling if the element doesn't exist or is not properly initialized.

**CreateElement + AppendChild**

Pros:

* More flexible, as it allows for custom element creation and manipulation.
* Can be used in situations where `innerHTML` is not available or supported.

Cons:

* Slower, as it involves creating a new element and appending it to the container.
* More memory allocation and deallocation, which can lead to poorer performance.

**Library Usage**

In this benchmark, no specific library is used. However, some libraries like jQuery or React might use similar approaches for setting inner HTML or manipulating elements.

**Special JS Feature/Syntax**

There's a special syntax being tested: `const container = document.getElementById('container')\r\ncontainer.innerHTML = '<span>I did it Mom !</span>'`. The `\r\n` escape sequence is used to create a newline character, which can affect the performance of some browsers.

**Benchmark Preparation Code and Test Cases**

The benchmark preparation code is minimal, consisting only of creating an HTML element with an ID `container`. The test cases define two scenarios:

1. **InnerHTML**: Sets the inner HTML of the container using the `innerHTML` property.
2. **CreateElement + AppendChild**: Creates a new span element, sets its text content, and appends it to the container using `appendChild`.

**Benchmark Results**

The latest benchmark results show that Chrome 128 on Windows Desktop outperforms the alternative approach in terms of executions per second:

* **InnerHTML**: 586155.9375 executions per second
* **CreateElement + AppendChild**: 405708.53125 executions per second

Keep in mind that these numbers are specific to this benchmark and might not be representative of other scenarios or browsers.

**Other Alternatives**

If you're looking for alternative approaches, consider the following:

1. **Use a Virtual DOM library**: Libraries like React or Vue.js can help with efficient DOM manipulation by using a virtual DOM representation.
2. **Use a templating engine**: Engines like Handlebars or Mustache can help with generating HTML content efficiently.
3. **Optimize inner HTML usage**: Consider caching the result of `innerHTML` calls to avoid repeated DOM lookups.

Remember that performance optimization should always be tailored to your specific use case and requirements.

Related benchmarks:

Bench InnerHTML vs CreateElement + AppendChild (version: 0)

Bench InnerHTML vs CreateElement + AppendChild

Comparing performance of: InnerHTML vs CreateElement + AppendChild

Created: 4 years ago by: Guest

Jump to the latest result

InnerHTML

CreateElement + AppendChild

Suite status: <idle, ready to run>

Fastest: N/A

Slowest: N/A

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