Benchmark: Creating/adding html element performance (100 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<100; 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<100; i++) { $("#test").append($("<div />").addClass("test-div")); }
Strings / append
var s = ""; for (var i=0; i<100; i++) { s += "<div class=\"test-div\"></div>"; } $("#test").append(s);
Strings array / append
var a = []; for (var i=0; i<100; i++) { a.push("<div class=\"test-div\"></div>"); } $("#test").append(a.join(""));
Strings / innerHTML
var s = ""; for (var i=0; i<100; 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<100; 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<100; i++) { s += "<div class=\"test-div\"></div>"; } $("#test").html(s);
Strings array / html
var a = []; for (var i=0; i<100; 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	9446.4 Ops/sec
Jquery	1056.1 Ops/sec
Strings / append	2935.7 Ops/sec
Strings array / append	3456.0 Ops/sec
Strings / innerHTML	9502.6 Ops/sec
Strings array / innerHTML	11239.9 Ops/sec
Strings / html	7622.2 Ops/sec
Strings array / html	8299.7 Ops/sec

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

LLMs can make mistakes. Check important info.

I'll do my best to break down the provided benchmark data for you.

**Benchmark Overview**

The benchmark measures the performance of creating and adding HTML elements to an element with varying approaches. The test is designed to compare the execution speed of different methods, including pure JavaScript, jQuery, strings with append, arrays with append, strings with innerHTML, and arrays with innerHTML.

**Options Compared**

Here's a brief description of each option:

1. **Pure JavaScript**: This method uses `document.createDocumentFragment()` to create a fragment, then appends elements to it using `appendChild()`. Finally, the fragment is appended to the target element.
2. **jQuery**: This method uses jQuery's `.append()` function to add elements to the target element.
3. **Strings / append**: This method concatenates strings using the `+` operator and appends them to the target element using `innerHTML`.
4. **Strings array / append**: Similar to Strings / append, but an array of strings is used instead of a single string.
5. **Strings / innerHTML**: This method uses the `innerHTML` property to set the content of the target element.
6. **Strings array / innerHTML**: Similar to Strings / innerHTML, but an array of strings is used instead.

**Pros and Cons of Each Approach**

Here's a brief summary:

1. **Pure JavaScript**:
	* Pros: More control over the DOM, no reliance on a library (jQuery).
	* Cons: May be slower due to the overhead of creating a fragment.
2. **jQuery**:
	* Pros: Faster execution speed, ease of use for developers familiar with jQuery.
	* Cons: Relies on an external library, may not be suitable for projects without jQuery.
3. **Strings / append** and **Strings array / append**:
	* Pros: Simple and easy to understand, no additional libraries required.
	* Cons: May lead to performance issues due to string concatenation and DOM manipulation.
4. **Strings / innerHTML** and **Strings array / innerHTML**:
	* Pros: Faster execution speed, easier than manual DOM manipulation.
	* Cons: May not be suitable for projects with strict security policies (e.g., input validation).

**Benchmark Results**

The provided benchmark data shows the execution speed of each approach on a desktop Chrome browser. The results are ordered from fastest to slowest.

1. **Strings / innerHTML**: 7622.23046875
2. **Strings array / innerHTML**: 3456.020263671875
3. **Jquery**: 1056.1279296875
4. **Pure JavaScript**: 9446.369140625 (note: this result is actually slower than the two string-based methods)
5. **Strings / append**: 2935.73974609375
6. **Strings array / append**: 3456.020263671875

Keep in mind that these results are specific to Chrome and may vary across other browsers or platforms.

I hope this explanation helps! Let me know if you have any further questions.

Related benchmarks:

Creating/adding html element performance (100 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):