Run results for: Update template elements vs replace template HTML

Run details:

User agent: Mozilla/5.0 (Macintosh; Intel Mac OS X 10_15_7) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/132.0.0.0 Safari/537.36

Browser: Chrome 132

Operating system: Mac OS X 10.15.7

Device Platform: Desktop

Date tested: one year ago

Benchmark engine: Benchmark.js

From template

64/s

From string

14/s

View exact numbers

Test name	Executions per second
✓ From template	64 Ops/sec
From string	14 Ops/sec

HTML Preparation code:

<template id="real-template">
    <article class="article">
        <header class="article-header">
            <h1 class="article-header_title">${title}</h1>
            <i class="article-header_created">
                Created by:
                <b class="article-header_author">${author}</b>
            </i>
        </header>
        <p class="article-text">${text}</p>
    </article>
</template>

Script Preparation code:

window.articles = [
    {
        title: 'Lorem ipsum dolor sit amet',
        author: 'John Doe',
        text: 'Lorem ipsum dolor sit amet, consectetur adipisicing elit.\nIllum, impedit voluptatem? Ratione.'
    },
    {
        title: 'Consectetur adipisicing',
        author: 'John Dox',
        text: 'Lorem ipsum dolor sit amet,\nconsectetur adipisicing elit.\nIllum, impedit voluptatem?'
    },
    {
        title: 'Impedit voluptatem',
        author: 'Johan Doch',
        text: 'Impedit voluptatem? Lorem ipsum dolor sit amet,\nconsectetur adipisicing elit.'
    }
];

const keys = ['title', 'author', 'text'];
const classes = [
  '.article-header_' + keys[0],
  '.article-header_' + keys[1],
  '.article-' + keys[2]
];

// get template, clone it, replace textContent of nodes
const realTemplate = document.getElementById('real-template');
window.fromTemplate = (vars) => {
    const node = realTemplate.content.firstElementChild.cloneNode(true);
    const nodes = node.querySelectorAll('' + classes);
    for (let i = 0; keys[i]; i++) {
        nodes[i].textContent = vars[keys[i]];
    }
    return node;
}

// get template, replace full HTML, clone it
const tempTemplate = document.createElement('template');
window.fromString = (vars) => {
    tempTemplate.innerHTML =  `
    <article class="article">
        <header class="article-header">
            <h1 class="article-header_title">${vars.title}</h1>
            <i class="article-header_created">
                Created by:
                <b class="article-header_author">${vars.author}</b>
            </i>
        </header>
        <p class="article-text">${vars.text}</p>
    </article>`;
    return tempTemplate.content.firstElementChild.cloneNode(true);
}

Tests:

From template
let i = 10000; while (i--) { if (i % 3 === 0) { fromTemplate(articles[2]); continue; } if (i % 2 === 0) { fromTemplate(articles[1]); continue; } fromTemplate(articles[0]); }
From string
let i = 10000; while (i--) { if (i % 3 === 0) { fromString(articles[2]); continue; } if (i % 2 === 0) { fromString(articles[1]); continue; } fromString(articles[0]); }