Run results for: Template vs CreateElement

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

Clone node deep

143/s

Build new elements

51/s

View exact numbers

Test name	Executions per second
✓ Clone node deep	143 Ops/sec
Build new elements	51 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);