Benchmark: Build article from template vs from code

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

Rendered benchmark preparation results:

Suite status: <idle, ready to run>

Previous results

Test case name	Result
From template
From code

Fastest: N/A

Slowest: N/A

Latest run results:

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

User agent: Mozilla/5.0 (Linux; Android 10; K) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/132.0.0.0 Mobile Safari/537.36

Browser/OS: Chrome Mobile 132 on Android

View result in a separate tab

Test name	Executions per second
From template	48.6 Ops/sec
From code	24.8 Ops/sec

Autogenerated LLM Summary (model llama3.2:3b, generated 6 months ago):

LLMs can make mistakes. Check important info.

Based on the provided benchmark definition and test cases, I'm going to analyze the performance of two different approaches: using HTML templates (`fromTemplate`) versus generating HTML from a template engine.

**Benchmark Definition**

The first benchmark definition uses a `while` loop to iterate over 1000 iterations. For each iteration, it checks if the current number is divisible by 3 (in which case it uses `fromTemplate(articles[2])`), even (using `fromTemplate(articles[1])`), or neither (using `fromTemplate(articles[0])`). This approach seems to be using a template-based rendering mechanism, where each `articleBuilder` function call is replaced by the actual rendered HTML.

The second benchmark definition uses an identical loop structure but instead calls `articleBuilder(articles[x])` for each iteration. The difference here is that the HTML generation is not embedded in the template; instead, it's generated on-the-fly using a separate `articleBuilder` function.

**Test Cases**

We have two test cases:

1. **"From template"`: This benchmark uses the `fromTemplate` approach, where the HTML is rendered using a template engine.
2. **"From code"`: This benchmark uses the `articleBuilder` function to generate HTML from scratch.

**Results**

Based on the provided results, we have two sets of execution counts:

| Test Name | Executions Per Second |
| --- | --- |
| "From template" (Safari 17) | 102.5423355102539 |
| "From code" (Safari 17) | 33.197017669677734 |

**Analysis**

The results suggest that the `fromTemplate` approach performs significantly better than the `articleBuilder` function-based approach, even on a relatively modern desktop platform (Mac OS X 10.15.7). This is likely due to the overhead of generating HTML from scratch using JavaScript.

In contrast, the template-based rendering mechanism seems to be faster and more efficient, possibly because it avoids unnecessary work in terms of parsing, formatting, and concatenating HTML elements.

**Conclusion**

Based on these results, I would recommend using the `fromTemplate` approach for building dynamic web content. While this may require more upfront setup and configuration (e.g., defining templates), the benefits in terms of performance and maintainability are likely to outweigh any additional costs.

Related benchmarks:

Build article from template vs from code (version: 2)

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

Comparing performance of: From template vs From code

Created: 5 years ago by: Registered User

Jump to the latest result

From template

From code

Suite status: <idle, ready to run>

Experimental features:

Fastest: N/A

Slowest: N/A

Autogenerated LLM Summary (model llama3.2:3b, generated 6 months ago):