Run results for: Build article from template vs from code

Run details:

User agent: Mozilla/5.0 (Macintosh; Intel Mac OS X 10_15_7) AppleWebKit/605.1.15 (KHTML, like Gecko) Version/17.1 Safari/605.1.15

Browser: Safari 17

Operating system: Mac OS X 10.15.7

Device Platform: Desktop

Date tested: 6 months ago

Test name	Executions per second
From template	102.5 Ops/sec
From code	33.2 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>
        <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>
        <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>
        <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>
        <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>
        <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>
        <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>
        <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>
        <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>
        <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;
}

const cache = {};

function el(tag, props, children) {
    const el = cache[tag] ? cache[tag].cloneNode() : cache[tag] = document.createElement(tag);

    Object.assign(el, props);

    el.append(...(children || []));

    return el;
}

// rebuild whole element from scratch
window.articleBuilder = (vars) => (
    el('article', {className: 'article'}, [
        el('header', {className: 'article-header'}, [
            el('h1', {className: 'article-header_title'}, [
                vars.title
            ]),
            el('i', {className: 'article-header_created'}, [
                'Created by: ',
                el('b', {className: 'article-header_author'}, [
                    vars.author
                ])
            ])
        ]),
        el('p', {className: 'article-text'}, [
            vars.text
        ]),
        el('header', {className: 'article-header'}, [
            el('h1', {className: 'article-header_title'}, [
                vars.title
            ]),
            el('i', {className: 'article-header_created'}, [
                'Created by: ',
                el('b', {className: 'article-header_author'}, [
                    vars.author
                ])
            ])
        ]),
        el('p', {className: 'article-text'}, [
            vars.text
        ]),
        el('header', {className: 'article-header'}, [
            el('h1', {className: 'article-header_title'}, [
                vars.title
            ]),
            el('i', {className: 'article-header_created'}, [
                'Created by: ',
                el('b', {className: 'article-header_author'}, [
                    vars.author
                ])
            ])
        ]),
        el('p', {className: 'article-text'}, [
            vars.text
        ]),
        el('header', {className: 'article-header'}, [
            el('h1', {className: 'article-header_title'}, [
                vars.title
            ]),
            el('i', {className: 'article-header_created'}, [
                'Created by: ',
                el('b', {className: 'article-header_author'}, [
                    vars.author
                ])
            ])
        ]),
        el('p', {className: 'article-text'}, [
            vars.text
        ]),
        el('header', {className: 'article-header'}, [
            el('h1', {className: 'article-header_title'}, [
                vars.title
            ]),
            el('i', {className: 'article-header_created'}, [
                'Created by: ',
                el('b', {className: 'article-header_author'}, [
                    vars.author
                ])
            ])
        ]),
        el('p', {className: 'article-text'}, [
            vars.text
        ]),
        el('header', {className: 'article-header'}, [
            el('h1', {className: 'article-header_title'}, [
                vars.title
            ]),
            el('i', {className: 'article-header_created'}, [
                'Created by: ',
                el('b', {className: 'article-header_author'}, [
                    vars.author
                ])
            ])
        ]),
        el('p', {className: 'article-text'}, [
            vars.text
        ]),
        el('header', {className: 'article-header'}, [
            el('h1', {className: 'article-header_title'}, [
                vars.title
            ]),
            el('i', {className: 'article-header_created'}, [
                'Created by: ',
                el('b', {className: 'article-header_author'}, [
                    vars.author
                ])
            ])
        ]),
        el('p', {className: 'article-text'}, [
            vars.text
        ]),
        el('header', {className: 'article-header'}, [
            el('h1', {className: 'article-header_title'}, [
                vars.title
            ]),
            el('i', {className: 'article-header_created'}, [
                'Created by: ',
                el('b', {className: 'article-header_author'}, [
                    vars.author
                ])
            ])
        ]),
        el('p', {className: 'article-text'}, [
            vars.text
        ]),
        el('header', {className: 'article-header'}, [
            el('h1', {className: 'article-header_title'}, [
                vars.title
            ]),
            el('i', {className: 'article-header_created'}, [
                'Created by: ',
                el('b', {className: 'article-header_author'}, [
                    vars.author
                ])
            ])
        ]),
        el('p', {className: 'article-text'}, [
            vars.text
        ]),
        el('header', {className: 'article-header'}, [
            el('h1', {className: 'article-header_title'}, [
                vars.title
            ]),
            el('i', {className: 'article-header_created'}, [
                'Created by: ',
                el('b', {className: 'article-header_author'}, [
                    vars.author
                ])
            ])
        ]),
        el('p', {className: 'article-text'}, [
            vars.text
        ]),
    ])
);

Tests:

From template
let i = 1000; while (i--) { if (i % 3 === 0) { fromTemplate(articles[2]); continue; } if (i % 2 === 0) { fromTemplate(articles[1]); continue; } fromTemplate(articles[0]); }
From code
let i = 1000; while (i--) { if (i % 3 === 0) { articleBuilder(articles[2]); continue; } if (i % 2 === 0) { articleBuilder(articles[1]); continue; } articleBuilder(articles[0]); }

Run results for: Build article from template vs from code

Comparing speed of cloned template and updated elements vs rebuilding whole content from scratch

From template

From code