Run results for: Template, InnerHTML, concat

Run details:

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

Browser: Chrome 109

Operating system: Windows

Device Platform: Desktop

Date tested: one year ago

Test name	Executions per second
Paste node template	4075.8 Ops/sec
Paste node innerHTML	379.3 Ops/sec

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;

Run results for: Template, InnerHTML, concat

Paste node template

Paste ready html