Benchmark: Creating/adding html element performance (10 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<10; i++) { var e = document.createElement("div"); e.className = "test-div"; c.appendChild(e); } var elem = document.getElementById("test"); elem.appendChild(c);
Jquery
for (var i=0; i<10; i++) { $("#test").append($("<div />").addClass("test-div")); }
Strings / append
var s = ""; for (var i=0; i<10; i++) { s += "<div class=\"test-div\"></div>"; } $("#test").append(s);
Strings array / append
var a = []; for (var i=0; i<10; i++) { a.push("<div class=\"test-div\"></div>"); } $("#test").append(a.join(""));
Strings / innerHTML
var s = ""; for (var i=0; i<10; i++) { s += "<div class=\"test-div\"></div>"; } var elem = document.getElementById("test"); elem.innerHTML = s;
Strings array / innerHTML
var a = []; for (var i=0; i<10; i++) { a.push("<div class=\"test-div\"></div>"); } var elem = document.getElementById("test"); elem.innerHTML = a.join("");
Strings / html
var s = ""; for (var i=0; i<10; i++) { s += "<div class=\"test-div\"></div>"; } $("#test").html(s);
Strings array / html
var a = []; for (var i=0; i<10; i++) { a.push("<div class=\"test-div\"></div>"); } $("#test").html(a.join(""));

Rendered benchmark preparation results:

Suite status: <idle, ready to run>

Previous results

Test case name	Result
Pure JavaScript
Jquery
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: 3 years ago)

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

Browser/OS: Chrome 91 on Windows

View result in a separate tab

Test name	Executions per second
Pure JavaScript	106355.3 Ops/sec
Jquery	9997.1 Ops/sec
Strings / append	22933.0 Ops/sec
Strings array / append	24150.2 Ops/sec
Strings / innerHTML	56382.3 Ops/sec
Strings array / innerHTML	52443.0 Ops/sec
Strings / html	32411.2 Ops/sec
Strings array / html	38210.2 Ops/sec

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

LLMs can make mistakes. Check important info.

I'll break down the benchmark and its options for you.

**Benchmark Overview**

The benchmark measures the performance of creating and adding HTML elements to a document. The test cases compare different approaches to achieve this:

1. **Pure JavaScript**: Creates an empty `document.createDocumentFragment()` element, appends 10 child elements to it, and then appends the fragment to another element (`#test`).
2. **jQuery**: Uses jQuery's `.append()` method to add 10 child elements to the `#test` element.
3. **Strings / append**: Concatenates 10 HTML strings using a loop and then appends the result to the `#test` element.
4. **Strings array / append**: Appends an array of 10 HTML strings to the `#test` element using the `join()` method.
5. **Strings / innerHTML**: Sets the innerHTML property of the `#test` element to a concatenated string.
6. **Strings array / innerHTML**: Sets the innerHTML property of the `#test` element to an array of strings joined by an empty string.
7. **Strings / html**: Sets the HTML content of the `#test` element to a concatenated string.
8. **Strings array / html**: Sets the HTML content of the `#test` element to an array of strings joined by an empty string.

**Options Comparison**

The benchmark measures the performance of each option in terms of the number of executions per second (ExecutionsPerSecond). The results show that:

* jQuery is significantly slower than the other options, indicating its overhead.
* **Strings / append**, **Strings array / append**, and **Strings / html** are relatively fast, with minor differences between them.
* **Strings array / innerHTML** and **Strings / append** are comparable in performance.
* **Pure JavaScript** is the fastest option.

**Interpretation**

The benchmark results suggest that:

* Using jQuery can be slower than writing native JavaScript code for simple tasks like appending elements.
* Concatenating strings using a loop or `join()` method can be faster than creating an array and then joining its elements.
* Setting the innerHTML property directly is generally faster than setting it via a string concatenation.

Keep in mind that these results may depend on specific browser versions, JavaScript engines, and system configurations.

Related benchmarks:

Creating/adding html element performance (10 elements) (version: 0)

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

Created: 3 years ago by: Guest

Jump to the latest result

Pure JavaScript

Jquery

Strings / append

Strings array / append

Strings / innerHTML

Strings array / innerHTML

Strings / html

Strings array / html

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