Benchmark: Template, InnerHTML, concat

HTML Preparation code:

<section class="cards"></section>

<template id="product-card-template">
    <div class="product-card">
        <img class="product-card__photo" src="#" alt="" />
        <div class="product-card__text-container">
            <h3 class="product-card__title"></h3>
            <p class="product-card__cost"></p>
        </div>
        <div class="product-card__button-container">
            <button class="product-card__order-button" type="button">Заказать</button>
            <button class="product-card__basket-button" type="button">В корзину</button>
        </div>
    </div>
</template>

Script Preparation code:

var sectionCards = document.querySelector('.cards');
var templateCards = document.querySelector('#product-card-template');
var cardInnerHTML = `<div class="product-card">
        <img class="product-card__photo" src="#" alt="" />
        <div class="product-card__text-container">
            <h3 class="product-card__title"></h3>
            <p class="product-card__cost"></p>
        </div>
        <div class="product-card__button-container">
            <button class="product-card__order-button" type="button">Заказать</button>
            <button class="product-card__basket-button" type="button">В корзину</button>
        </div>
    </div>`;

Tests:

Paste node template
for (let index = 0; index < 10; index++) { var cardTemplate = templateCards.content.querySelector('.product-card').cloneNode(true); sectionCards.prepend(cardTemplate); }
Paste ready html
var result; for (let index = 0; index < 10; index++) { result += cardInnerHTML } sectionCards.innerHTML = result;

Rendered benchmark preparation results:

Suite status: <idle, ready to run>

Previous results

Test case name	Result
Paste node template
Paste ready html

Fastest: N/A

Slowest: N/A

Autogenerated LLM Sumamry (model llama3.2:3b, generated 4 days ago):

LLMs can make mistakes. Check important info.

**Benchmark Overview**

The provided benchmark measures the performance of two approaches for concatenating HTML strings and appending them to an HTML element: using a template node or using string concatenation.

**Template Node Approach**

This approach uses the `cloneNode` method to create multiple instances of an HTML template, which is stored in the `#product-card-template` element. The cloned templates are then appended to the `#cards` section.

```javascript
// Create a template
var templateCards = document.querySelector('#product-card-template');
```

**String Concatenation Approach**

This approach uses string concatenation to build an HTML string and then appends it to the `#cards` section.

```javascript
// Define an HTML string
var cardInnerHTML = `<div class="product-card">
        <img class="product-card__photo" src="#" alt="" />
        <div class="product-card__text-container">
            <h3 class="product-card__title"></h3>
            <p class="product-card__cost"></p>
        </div>
        <div class="product-card__button-container">
            <button class="product-card__order-button" type="button">Заказать</button>
            <button class="product-card__basket-button" type="button">В корзину</button>
        </div>
    </div>`;

// Append the HTML string to the section
var sectionCards = document.querySelector('.cards');
sectionCards.innerHTML += cardInnerHTML;
```

**Options Compared**

The two approaches are compared in terms of their execution speed. The benchmark aims to measure which approach is faster for large datasets.

**Pros and Cons of Each Approach**

**Template Node Approach:**

Pros:

* More efficient use of DOM elements, as the cloned templates are re-used
* Can reduce the number of DOM mutations

Cons:

* Requires creating a template element upfront
* Cloning can be slower than concatenation

**String Concatenation Approach:**

Pros:

* Simpler to implement and maintain
* Does not require creating a template element upfront

Cons:

* Creates multiple DOM elements, which can lead to performance issues
* Can result in more DOM mutations

**Library Used**

In this benchmark, the `cloneNode` method is used from the DOM API. This method creates a new copy of an existing node, preserving its attributes and child nodes.

**Special JS Feature/Syntax**

The benchmark does not use any special JavaScript features or syntax, such as ES6 classes or async/await.

**Alternative Approaches**

Other approaches that could be considered for this benchmark include:

* Using a library like React or Angular to manage the DOM
* Using a string concatenation library like Underscore.js
* Using a templating engine like Handlebars

However, these alternatives may introduce additional overhead and complexity, making them less suitable for a simple benchmark like this one.

Latest run results:

Run details: (Test run date: one year ago)

User agent: Mozilla/5.0 (Windows NT 10.0; Win64; x64; rv:108.0) Gecko/20100101 Firefox/108.0

Browser/OS: Firefox 108 on Windows

View result in a separate tab

Test name	Executions per second
Paste node template	6120.8 Ops/sec
Paste ready html	4501.2 Ops/sec

Related benchmarks:

Template, InnerHTML, concat (version: 4)

Comparing performance of: Paste node template vs Paste ready html

Created: one year ago by: Registered User

Jump to the latest result

Paste node template

Paste ready html

Suite status: <idle, ready to run>

Experimental features:

Fastest: N/A

Slowest: N/A

Autogenerated LLM Sumamry (model llama3.2:3b, generated 4 days ago):