Benchmark: litterals vs createElement

HTML Preparation code:

<div id="content"></div>

Script Preparation code:

let div = document.createElement("div");
div.setAttribute("id", "content");
document.getElementsByTagName("body")[0].appendChild(div);

Tests:

let doc
let div = document.createElement("div"), span = document.createElement("span"); div.setAttribute("attr1", "value1"); div.setAttribute("attr2", "value2"); div.setAttribute("attr3", "value3"); div.setAttribute("attr4", "value4"); div.setAttribute("attr5", "value5"); span.setAttribute("attr1", "value1"); span.setAttribute("attr2", "value2"); span.setAttribute("attr3", "value3"); span.setAttribute("attr4", "value4"); span.setAttribute("attr5", "value5"); div.appendChild(span) span = null; document.getElementsByTagName("body")[0].appendChild(div); div = null;
const doc
const div = document.createElement("div"), span = document.createElement("span"); div.setAttribute("attr1", "value1"); div.setAttribute("attr2", "value2"); div.setAttribute("attr3", "value3"); div.setAttribute("attr4", "value4"); div.setAttribute("attr5", "value5"); span.setAttribute("attr1", "value1"); span.setAttribute("attr2", "value2"); span.setAttribute("attr3", "value3"); span.setAttribute("attr4", "value4"); span.setAttribute("attr5", "value5"); div.appendChild(span) document.getElementsByTagName("body")[0].appendChild(div);
template let
let html = ` <div attr1="value1" attr2="value2" attr3="value3" attr4="value4" attr5="value5"> <span attr1="value1" attr2="value2" attr3="value3" attr4="value4" attr5="value5"></span> </div> `; document.getElementsByTagName("body")[0].insertAdjacentHTML("beforeend", html);
template
document.getElementsByTagName("body")[0].insertAdjacentHTML("afterbegin", ` <div attr1="value1" attr2="value2" attr3="value3" attr4="value4" attr5="value5"> <span attr1="value1" attr2="value2" attr3="value3" attr4="value4" attr5="value5"></span> </div> `);

Rendered benchmark preparation results:

Suite status: <idle, ready to run>

Previous results

Test case name	Result
let doc
const doc
template let
template

Fastest: N/A

Slowest: N/A

Latest run results:

No previous run results

This benchmark does not have any results yet. Be the first one to run it!

Autogenerated LLM Summary (model llama3.1:latest, generated one year ago):

LLMs can make mistakes. Check important info.

Let's dive into the benchmark test cases.

**Benchmark Definition**

The benchmark is titled "literals vs createElement" and tests three different ways to create HTML elements in JavaScript: using literals, `createElement`, and template literals.

**Individual Test Cases**

We have four test cases:

1. **let doc**: This test case uses the `let` keyword to declare variables `div` and `span`. It creates these elements using `document.createElement`, sets attributes on them, appends `span` to `div`, and then appends `div` to the body of the HTML document.
2. **const doc**: This is similar to the previous test case, but it uses the `const` keyword instead of `let`.
3. **template let**: In this test case, a template literal is used to create an HTML string that includes both `div` and `span` elements with their attributes set. The resulting HTML string is then inserted into the body of the document using `insertAdjacentHTML`.
4. **template**: This test case is similar to the previous one, but it uses a single template literal to create the entire HTML snippet without declaring any variables.

**Latest Benchmark Results**

The results show the execution speed (ExecutionsPerSecond) for each test case on Chrome 89 browser:

* `let doc`: 672.5888061523438 executions per second
* `const doc`: 636.13232421875 executions per second
* **template let**: 574.3478393554688 executions per second
* **template**: 515.4639282226562 executions per second

**What's Being Tested**

The benchmark is comparing the performance of three different approaches to creating HTML elements in JavaScript:

1. **Using literals (let doc)**: This approach involves declaring variables using `let` and then creating elements using `document.createElement`. It also sets attributes on these elements.
2. **Using createElement with let or const**: This approach uses either `let` or `const` to declare variables, creates elements using `document.createElement`, sets attributes, and appends them to the document body.
3. **Template literals (template let and template)**: This approach involves creating an HTML string using a template literal and then inserting it into the document body using `insertAdjacentHTML`.

**Pro/Cons of Each Approach**

1. **Using literals**: Pros:
	* Easy to read and write.
	* Good for simple cases.
	* No need for DOM manipulation functions (e.g., `createElement`).
Cons:
	* Can lead to slower performance if dealing with complex HTML structures or large numbers of elements.

2. **Using createElement**: Pros:
	* Better performance when creating multiple elements.
	* Allows for more control over element creation and attributes.
	* More suitable for complex cases where literals might be cumbersome.
Cons:
	* More verbose than using literals.
	* Requires DOM manipulation functions.

3. **Template literals**: Pros:
	* A concise way to create HTML strings.
	* Fast performance, as it avoids DOM manipulation functions.
	* Suitable for both simple and complex cases.
Cons:
	* May be harder to read and understand for those not familiar with template literals.

**Other Considerations**

1. **Browser support**: The results are based on Chrome 89 browser; performance might differ on other browsers or versions.
2. **Complexity of HTML structure**: The benchmark is relatively simple, but the performance difference between approaches may be more pronounced when dealing with complex HTML structures or large numbers of elements.

I hope this explanation helps!

Related benchmarks:

litterals vs createElement (version: 0)

Comparing performance of: let doc vs const doc vs template let vs template

Created: 5 years ago by: Guest

Jump to the latest result

let doc

const doc

template let

template

Suite status: <idle, ready to run>

Fastest: N/A

Slowest: N/A

No previous run results

Autogenerated LLM Summary (model llama3.1:latest, generated one year ago):