Benchmark: Creating/adding html element performance (5 elements)

HTML Preparation code:

<script type="text/javascript" src="https://code.jquery.com/jquery-3.2.1.min.js"></script>

<div id="test"></div>

Tests:

Pure JavaScript
var c = document.createDocumentFragment(); for (var i=0; i<5; i++) { const inputElem = document.createElement("input"); inputElem.id = "inputTest" + i; inputElem.name = "inputTest"; inputElem.type = "radio"; inputElem.value = "value"; const labelElem = document.createElement("label"); labelElem.htmlFor = "inputTest" + i; labelElem.innerText = "inputTest" + i; labelElem.setAttribute("style", "color: " + "#FF0000"); const container = document.createElement("label"); container.appendChild(inputElem); container.appendChild(labelElem); c.appendChild(container); } var elem = document.getElementById("test"); elem.appendChild(c);
Strings / append
var s = ""; for (var i=0; i<5; i++) { s += "<label><input id='inputTest" + i + "' type='radio' name='inputTest' value='value'><label for='inputTest" + i + "' style='color: #FF0000'>inputTest" + i + "</label></label>"; } $("#test").append(s);
Strings array / append
var a = []; for (var i=0; i<5; i++) { a.push("<label><input id='inputTest" + i + "' type='radio' name='inputTest' value='value'><label for='inputTest" + i + "' style='color: #FF0000'>inputTest" + i + "</label></label>"); } $("#test").append(a.join(""));
Strings / innerHTML
var s = ""; for (var i=0; i<5; i++) { s += "<label><input id='inputTest" + i + "' type='radio' name='inputTest' value='value'><label for='inputTest" + i + "' style='color: #FF0000'>inputTest" + i + "</label></label>"; } var elem = document.getElementById("test"); elem.innerHTML = s;
Strings array / innerHTML
var a = []; for (var i=0; i<5; i++) { a.push("<label><input id='inputTest" + i + "' type='radio' name='inputTest' value='value'><label for='inputTest" + i + "' style='color: #FF0000'>inputTest" + i + "</label></label>"); } var elem = document.getElementById("test"); elem.innerHTML = a.join("");
Strings / html
var s = ""; for (var i=0; i<5; i++) { s += "<label><input id='inputTest" + i + "' type='radio' name='inputTest' value='value'><label for='inputTest" + i + "' style='color: #FF0000'>inputTest" + i + "</label></label>"; } $("#test").html(s);
Strings array / html
var a = []; for (var i=0; i<5; i++) { a.push("<label><input id='inputTest" + i + "' type='radio' name='inputTest' value='value'><label for='inputTest" + i + "' style='color: #FF0000'>inputTest" + i + "</label></label>"); } $("#test").html(a.join(""));

Rendered benchmark preparation results:

Suite status: <idle, ready to run>

Previous results

Test case name	Result
Pure JavaScript
Strings / append
Strings array / append
Strings / innerHTML
Strings array / innerHTML
Strings / html
Strings array / html

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; rv:131.0) Gecko/20100101 Firefox/131.0

Browser/OS: Firefox 131 on Windows

View result in a separate tab

Strings array / innerHTML

25K/s

Strings / innerHTML

24K/s

Strings / html

19K/s

Strings array / html

18K/s

Pure JavaScript

535/s

Strings / append

161/s

Strings array / append

124/s

View exact numbers

Test name	Executions per second
✓ Strings array / innerHTML	24,749 Ops/sec
Strings / innerHTML	24,245 Ops/sec
Strings / html	18,602 Ops/sec
Strings array / html	18,336 Ops/sec
Pure JavaScript	535 Ops/sec
Strings / append	161 Ops/sec
Strings array / append	124 Ops/sec

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

LLMs can make mistakes. Check important info.

I'll break down the provided benchmark definitions and explain what's being tested, compared options, pros/cons of each approach, and other considerations.

**Benchmark Definitions:**

The benchmark measures the performance of different ways to create and append HTML elements in JavaScript. There are four test cases:

1. **Pure JavaScript**: This test case uses only vanilla JavaScript to create and append HTML elements.
2. **Strings / append**: This test case appends HTML strings using the `+` operator or string concatenation.
3. **Strings array / innerHTML**: This test case uses an array of HTML strings and sets the innerHTML of a container element.
4. **Strings  array / html**: This test case uses an array of HTML strings and sets the HTML content of a container element.

**Comparison Options:**

Each test case compares the performance of different methods to create and append HTML elements:

* Vanilla JavaScript (Pure JavaScript)
* String concatenation (`+` operator) or string interpolation
* Array of HTML strings with `innerHTML`
* Array of HTML strings with `html()` method

**Pros/Cons of each approach:**

1. **Vanilla JavaScript (Pure JavaScript)**:
	* Pros: Fast, lightweight, and easy to understand.
	* Cons: Can be slower than other methods due to the overhead of DOM manipulation.
2. **String concatenation (`+` operator) or string interpolation**:
	* Pros: Simple and easy to use, but can lead to performance issues due to the creation of temporary strings.
	* Cons: May not be suitable for large datasets or performance-critical applications.
3. **Array of HTML strings with `innerHTML`**:
	* Pros: Easy to implement and maintain, especially for small to medium-sized datasets.
	* Cons: Can lead to performance issues due to the overhead of setting innerHTML on each element.
4. **Array of HTML strings with `html()` method**:
	* Pros: Similar to using `innerHTML`, but may be slightly faster and more efficient.
	* Cons: May still lead to performance issues for large datasets.

**Other Considerations:**

* The benchmark uses a container element (`<div>`) to store the appended HTML content, which can affect performance.
* The test case only measures the time it takes to append one set of HTML elements, so results may vary depending on the specific use case.
* Firefox 131 is used as the browser, but other browsers and versions might yield different results.

**Benchmark Results:**

The latest benchmark results show that:

1. **Strings array / innerHTML** performs best with an execution rate of approximately 24.7 executions per second.
2. **Strings / append** is slower than the previous two options, with an execution rate of around 16.4 executions per second.

Keep in mind that these results may vary depending on your specific use case and environment.

Creating/adding html element performance (5 elements) (version: 0) Benchmark.js

Comparing performance of: `Pure JavaScript vs Strings / append vs Strings array / append vs Strings / innerHTML vs Strings array / innerHTML vs Strings / html vs Strings array / html`

Created: 5 years ago by: Guest

Go to the latest result

Pure JavaScript

Strings / append

Strings array / append

Strings / innerHTML

Strings array / innerHTML

Strings / html

Strings array / html

Suite status: <idle, ready to run>

Fastest: N/A

Slowest: N/A

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

Creating/adding html element performance (5 elements) (version: 0) Benchmark.js

Comparing performance of: Pure JavaScript vs Strings / append vs Strings array / append vs Strings / innerHTML vs Strings array / innerHTML vs Strings / html vs Strings array / html

Created: 5 years ago by: Guest

Go to the latest result

Pure JavaScript

Strings / append

Strings array / append

Strings / innerHTML

Strings array / innerHTML

Strings / html

Strings array / html

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: `Pure JavaScript vs Strings / append vs Strings array / append vs Strings / innerHTML vs Strings array / innerHTML vs Strings / html vs Strings array / html`