Run results for: Template vs CreateElement

Run details:

User agent: Mozilla/5.0 (X11; Linux x86_64; rv:146.0) Gecko/20100101 Firefox/146.0

Browser: Firefox 146

Operating system: Linux

Device Platform: Desktop

Date tested: 8 months ago

Benchmark engine: Benchmark.js

Clone node deep

50/s

Build new elements

20/s

View exact numbers

Test name	Executions per second
✓ Clone node deep	50 Ops/sec
Build new elements	20 Ops/sec

HTML Preparation code:

<template id="article-template">
    <article class="article">
        <header class="article-header">
            <h1 class="article-header_title">Lorem ipsum</h1>
            <i class="article-header_created">Created by: <b class="article-header_author">John Doe</b></i>
        </header>
        <p class="article-text">
            Lorem ipsum dolor sit amet, consectetur adipisicing elit.
            Illum, impedit voluptatem? Ratione.
        </p>
    </article>
</template>

Script Preparation code:

const cache = {};

function el(tag, props, children) {
    const el = cache[tag]
        ? cache[tag].cloneNode()
        : cache[tag] = document.createElement(tag);

    Object
      .assign(el, props)
      .append(...(children || []));

    return el;
}

window.articleBuilder = () => (
    el('article', {className: 'article'}, [
        el('header', {className: 'article-header'}, [
            el('h1', {className: 'article-header_title'}, [
                'Lorem ipsum'
            ]),
            el('i', {className: 'article-header_created'}, [
                'Created by: ',
                el('b', {className: 'article-header_author'}, [
                    'John Doe'
                ])
            ])
        ]),
        el('p', {className: 'article-text'}, [
            'Lorem ipsum dolor sit amet, consectetur adipisicing elit.\nIllum, impedit voluptatem? Ratione.'
        ])
    ])
);

window.articleTemplate = document.getElementById('article-template').content.firstElementChild;

Tests:

Build new elements
let i = 10000; while (i--) articleBuilder();
Clone node deep
let i = 10000; while (i--) articleTemplate.cloneNode(true);