Benchmark: Creating/adding html element performance (10 elements) v2

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("input"); e.className = "test-div"; e.name = "test-div-name"; e.type = "radio"; e.value = "test"; c.appendChild(e); } var elem = document.getElementById("test"); elem.appendChild(c);
Strings / append
var s = ""; for (var i=0; i<10; i++) { s += "<input class='test-div' name='test-div-name' type='radio' value='test'/>"; } $("#test").append(s);
Strings array / append
var a = []; for (var i=0; i<10; i++) { a.push("<input class='test-div' name='test-div-name' type='radio' value='test'/>"); } $("#test").append(a.join(""));
Strings / innerHTML
var s = ""; for (var i=0; i<10; i++) { s += "<input class='test-div' name='test-div-name' type='radio' value='test'/>"; } var elem = document.getElementById("test"); elem.innerHTML = s;
Strings array / innerHTML
var a = []; for (var i=0; i<10; i++) { a.push("<input class='test-div' name='test-div-name' type='radio' value='test'/>"); } var elem = document.getElementById("test"); elem.innerHTML = a.join("");
Strings / html
var s = ""; for (var i=0; i<10; i++) { s += "<input class='test-div' name='test-div-name' type='radio' value='test'/>"; } $("#test").html(s);
Strings array / html
var a = []; for (var i=0; i<10; i++) { a.push("<input class='test-div' name='test-div-name' type='radio' value='test'/>"); } $("#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: 2 years ago)

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

Browser/OS: Chrome 100 on Windows

View result in a separate tab

Test name	Executions per second
Pure JavaScript	14206.4 Ops/sec
Strings / append	11747.7 Ops/sec
Strings array / append	12276.7 Ops/sec
Strings / innerHTML	13655.4 Ops/sec
Strings array / innerHTML	21535.6 Ops/sec
Strings / html	18034.2 Ops/sec
Strings array / html	18125.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 what's being tested in the provided benchmark.

**Benchmark Overview**

The benchmark measures the performance of creating and adding HTML elements to a webpage using different approaches. The test creates 10 input radio buttons with specific attributes (class, name, type, and value) and appends them to an element with the ID "test".

**Test Approaches**

There are four main test approaches:

1. **Pure JavaScript**: Creates an empty `DocumentFragment` object, loops 10 times to create 10 input elements, and then appends them to the `DocumentFragment`. Finally, it appends the entire fragment to an element with the ID "test".
2. **Strings / append**: Creates a string containing the HTML for 10 input elements, and then uses jQuery's `.append()` method to add all the elements to an element with the ID "test".
3. **Strings array / append**: Similar to the previous approach, but instead of creating a single string, it creates an array of strings representing the HTML for each input element, and then joins them together using `join()`. It then uses jQuery's `.append()` method to add all the elements to an element with the ID "test".
4. **Strings / innerHTML**: Creates a string containing the HTML for 10 input elements, similar to the previous approach. However, instead of using `.append()`, it sets the `innerHTML` property of an element with the ID "test" to the entire string.

**Pros and Cons**

Here's a brief summary of each approach:

1. **Pure JavaScript**: This approach is likely to be slower because it involves creating a separate fragment object and then appending all the elements to that fragment, which can lead to additional DOM manipulation overhead.
2. **Strings / append**: Using `append()` to add multiple elements at once can be faster than creating individual elements in a loop, as it avoids the overhead of element creation and DOM manipulation.
3. **Strings array / append**: This approach is similar to the previous one, but by using an array and `join()`, it can avoid the overhead of string concatenation and create a more efficient DOM tree.
4. **Strings / innerHTML**: Setting `innerHTML` directly can be faster than using `.append()` because it avoids the overhead of DOM manipulation and element creation.

**Browser Performance**

The benchmark results show that:

* The `Strings array / append` approach is consistently the fastest, with high performance across all browsers.
* The `Pure JavaScript` approach is slower than the string-based approaches, likely due to its additional DOM manipulation overhead.
* The `Strings / innerHTML` approach is faster than `.append()` but not as fast as the `Strings array / append` approach.

Overall, the benchmark results suggest that using a string array with `join()` and appending elements can be an efficient way to add multiple HTML elements to a webpage.

Related benchmarks:

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

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: 3 years ago by: Guest

Jump 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>

Experimental features:

Fastest: N/A

Slowest: N/A

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