Benchmark: innerHTML vs createElement

Tests:

createElement
document.body.append( document.createElement("p"), document.createElement("p"), document.createElement("p"), document.createElement("p"), document.createElement("p") );
innerHTML
document.body.innerHTML = "12345";

Historical Performance Data aggregated from 18 community runs

Desktop Results:

Chrome 12 runs

createElement

313K/s

innerHTML

188K/s

Fastest: createElement (1.7x faster)

View exact numbers

✓ createElement: 313,011 ops/sec
• innerHTML: 187,850 ops/sec

Firefox 6 runs

innerHTML

67K/s

createElement

55K/s

Fastest: innerHTML (1.2x faster)

View exact numbers

✓ innerHTML: 67,269 ops/sec
• createElement: 54,822 ops/sec

Results show median performance across all community submissions. Run this benchmark yourself to verify on your device.

Rendered benchmark preparation results:

Suite status: <idle, ready to run>

Previous results

Test case name	Result
createElement
innerHTML

Fastest: N/A

Slowest: N/A

Latest run results:

Run details: (Test run date: one month ago)

User agent: Mozilla/5.0 (X11; Linux x86_64; rv:151.0) Gecko/20100101 Firefox/151.0

Browser/OS: Firefox 151 on Linux

View result in a separate tab

innerHTML

39K/s

createElement

36K/s

View exact numbers

Test name	Executions per second
✓ innerHTML	39,026 Ops/sec
createElement	35,533 Ops/sec

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

LLMs can make mistakes. Check important info.

Let's break down the provided JSON and explain what is being tested, compared, and considered in this JavaScript microbenchmark.

**Benchmark Definition**

The benchmark definition represents two approaches to create multiple elements on the HTML page:

1. `createElement`: This approach uses the `document.createElement()` method to create individual elements (in this case, `p` tags) and appends them to the document body.
2. `innerHTML`: This approach sets the inner HTML of an existing element (in this case, the `body` element) using a string containing multiple `` tags.

**Comparison**

The benchmark compares the performance of these two approaches:

* **createElement**: Creating individual elements and appending them to the DOM.
* **innerHTML**: Setting the inner HTML of an existing element using a string.

**Pros and Cons**

### createElement

Pros:

* More explicit control over element creation and manipulation
* Can be more efficient for dynamic or complex content creation
* Allows for better error handling and debugging

Cons:

* Requires more memory allocation and garbage collection due to individual elements being created
* May lead to slower performance if many elements need to be appended repeatedly

### innerHTML

Pros:

* Faster execution time since it involves setting the inner HTML of an existing element
* Less memory allocation is required, as only a single string needs to be created

Cons:

* Less control over element creation and manipulation
* Can lead to slower performance if the inner HTML changes frequently or is very large
* May cause issues with accessibility and SEO if not implemented correctly

**Library and Special JS Features**

Neither of these approaches relies on specific libraries or JavaScript features. However, it's worth noting that using `innerHTML` can be affected by browser-specific features like:

* ContentEditable API (not used in this benchmark)
* HTMLImport (not used in this benchmark)

**Other Alternatives**

For more complex content creation, you might consider the following alternatives:

1. **Template literals**: Use template literals to create a string that can be parsed and rendered as HTML.
2. **DOM manipulation libraries**: Libraries like jQuery or DOM manipulators can provide an efficient way to manipulate the DOM.
3. **Server-side rendering**: Render content on the server using a templating engine, which can reduce the number of requests made by JavaScript.

Keep in mind that these alternatives might introduce additional complexity and dependencies, so choose them carefully based on your specific use case and performance requirements.

innerHTML vs createElement (version: 0)

Comparing performance of: `createElement vs innerHTML`

Created: 2 years ago by: Guest

Go to the latest result

createElement

innerHTML

Historical Performance Data aggregated from 18 community runs

Desktop Results:

Chrome 12 runs

Firefox 6 runs

Suite status: <idle, ready to run>

Fastest: N/A

Slowest: N/A

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

innerHTML vs createElement (version: 0)

Comparing performance of: createElement vs innerHTML

Created: 2 years ago by: Guest

Go to the latest result

createElement

innerHTML

Historical Performance Data aggregated from 18 community runs

Desktop Results:

Chrome 12 runs

Firefox 6 runs

Suite status: <idle, ready to run>

Fastest: N/A

Slowest: N/A

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

Related benchmarks

Comparing performance of: `createElement vs innerHTML`