Benchmark: createElement vs innerHTML vs innerHTML (polling) x 300

HTML Preparation code:

<div class='x'></div>

Tests:

createElement
let fragment = new DocumentFragment(); for (let i = 0; i < 300; i++) { fragment.appendChild(document.createElement("div")); } document.querySelector(".x").append(fragment);
innerHTML
let fragment = ""; for (let i = 0; i < 300; i++) { fragment += "<div></div>"; } document.querySelector(".x").innerHTML = fragment;
innerHTML (polling)
for (let i = 0; i < 300; i++) { document.querySelector(".x").innerHTML += "<div></div>"; }

Rendered benchmark preparation results:

Suite status: <idle, ready to run>

Previous results

Test case name	Result
createElement
innerHTML
innerHTML (polling)

Fastest: N/A

Slowest: N/A

Latest run results:

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

User agent: Mozilla/5.0 (X11; Linux x86_64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/128.0.0.0 Safari/537.36

Browser/OS: Chrome 128 on Linux

View result in a separate tab

Test name	Executions per second
createElement	3019.2 Ops/sec
innerHTML	1528.6 Ops/sec
innerHTML (polling)	0.7 Ops/sec

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

LLMs can make mistakes. Check important info.

Let's break down the benchmark and its options.

**Benchmark Overview**

The benchmark compares three ways to create HTML elements in JavaScript:

1. `createElement`
2. `innerHTML` (without polling)
3. `innerHTML` with polling

**Options Compared**

*   `createElement`: Creates a new DOM element using the `document.createElement()` method.
*   `innerHTML`: Sets the inner HTML of an element without creating a new element, but instead modifying the existing one.

**Pros and Cons of Each Approach**

*   **createElement**: Pros:
    *   More control over the creation process
    *   Can avoid the overhead of parsing HTML strings
    *   Often faster for complex DOM structures

Cons:
    *   Requires more code to create a single element
*   `innerHTML`: Pros:
    *   Easier to use and faster than creating elements with `createElement`
    *   Reduces memory usage by reusing existing elements
*   `innerHTML (polling)`: This option is a variation of `innerHTML` that uses polling to update the inner HTML. It's likely included in the benchmark for comparison purposes, as it's often considered less optimal than `innerHTML`.

**Library Usage**

There are no libraries used in this benchmark.

**Special JavaScript Features or Syntax**

None mentioned. The benchmark only uses standard JavaScript syntax.

**Other Alternatives**

If you wanted to test other approaches, some alternatives could include:

*   Using a library like React or Angular for virtual DOM-based rendering
*   Using a templating engine like Handlebars or Mustache for server-side rendering
*   Comparing the performance of different DOM manipulation libraries (e.g., jQuery vs. vanilla JavaScript)

Keep in mind that these alternatives would introduce additional complexity and might not be relevant to this specific benchmark, which focuses on basic DOM element creation.

Related benchmarks:

createElement vs innerHTML vs innerHTML (polling) x 300 (version: 0)

createElement vs innerHTML vs innerHTML (polling) x 300

Comparing performance of: createElement vs innerHTML vs innerHTML (polling)

Created: 3 months ago by: Guest

Jump to the latest result

createElement

innerHTML

innerHTML (polling)

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):