Benchmark: Update template elements vs replace template HTML

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]); }

Rendered benchmark preparation results:

Suite status: <idle, ready to run>

Previous results

Test case name	Result
From template
From string

Fastest: N/A

Slowest: N/A

ⓘ Get performance results from real users on your website with Request Metrics.

Website Performance Monitoring by Request Metrics

Latest run results:

Run details: (Test run date: 3 years ago)

User agent: Mozilla/5.0 (Macintosh; Intel Mac OS X 11_0_1) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/87.0.4280.88 Safari/537.36

Browser/OS: Chrome 87 on Mac OS X 11.0.1

View result in a separate tab

Test name	Executions per second
From template	25.0 Ops/sec
From string	9.6 Ops/sec

Update template elements vs replace template HTML (version: 1)

Comparing performance of: From template vs From string

Created: 4 years ago by: Registered User

Jump to the latest result

From template

From string

Suite status: <idle, ready to run>

Experimental features:

Fastest: N/A

Slowest: N/A