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:

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/89.0.4389.128 Safari/537.36

Browser/OS: Chrome 89 on Windows

View result in a separate tab

Test name	Executions per second
let doc	672.6 Ops/sec
const doc	636.1 Ops/sec
template let	574.3 Ops/sec
template	515.5 Ops/sec

Autogenerated LLM Summary (model gemma2:9b, generated 2 months ago):

LLMs can make mistakes. Check important info.

This benchmark compares four different approaches to creating and populating a simple HTML structure with attributes in JavaScript:

**Approach 1: `let doc`** - Uses the traditional `document.createElement()` method followed by setting attributes individually using `setAttribute()`.

**Approach 2: `const doc`** - Identical to Approach 1, but uses `const` instead of `let` for variable declaration. This doesn't inherently impact performance but emphasizes constant value usage.

**Approach 3: `template let`** - Utilizes template literals (backticks) to create a multi-line HTML string and then inserts it into the document using `insertAdjacentHTML()`.

**Approach 4: `template`** - Similar to Approach 3, but uses a shorter template literal inserted after the beginning of the body (`afterbegin`).

## Pros/Cons and Considerations:

* **Approach 1 & 2 (`let doc`, `const doc`)**:  
    * **Pros:** Straightforward, widely understood.  Good for basic tasks.
    * **Cons:** Can be verbose when dealing with many attributes or complex structures.
* **Approach 3 & 4 (`template let`, `template`)**: 
    * **Pros:** More concise and readable than using multiple calls to `setAttribute()`. Easier to manage larger, more complex HTML structures.
    * **Cons:** Requires familiarity with template literals. Potential for increased parsing overhead compared to Approach 1 & 2 (though often negligible).

**Alternatives:**

*  **Virtual DOM libraries (like React or Vue):**  These optimize rendering by only updating the necessary parts of the page, making them highly efficient for dynamic applications but adding complexity for simple scenarios.
* **DOM manipulation libraries (like jQuery):**  Provide higher-level abstractions for DOM manipulation, potentially simplifying code but often with a performance cost compared to native JavaScript.

**Conclusion:**

In this specific benchmark, `let doc` consistently outperforms the other methods, suggesting that sometimes raw `createElement()` and `setAttribute()` calls can be slightly faster. However, the difference is likely minor in real-world applications where factors like page complexity, data size, and rendering context play a larger role. Template literals remain valuable for code readability and maintainability, especially for complex HTML structures.

Related benchmarks:

litterals vs createElement (version: 0)

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

Created: 3 years ago by: Guest

Jump to the latest result

let doc

const doc

template let

template

Suite status: <idle, ready to run>

Experimental features:

Fastest: N/A

Slowest: N/A

Autogenerated LLM Summary (model gemma2:9b, generated 2 months ago):