Benchmark: Template vs CreateElement

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

Rendered benchmark preparation results:

Suite status: <idle, ready to run>

Previous results

Test case name	Result
Build new elements
Clone node deep

Fastest: N/A

Slowest: N/A

Latest run results:

Run details: (Test run date: one month ago)

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

Browser/OS: Firefox 149 on Linux

View result in a separate tab

Test name	Executions per second
Build new elements	15.5 Ops/sec
Clone node deep	33.2 Ops/sec

Autogenerated LLM Summary (model llama3.2:3b, generated one year ago):

LLMs can make mistakes. Check important info.

**Benchmark Overview**

The provided JSON represents a JavaScript benchmark test case on MeasureThat.net, which compares the performance of two approaches: creating HTML elements using the `createElement` method and using a template element (`articleTemplate`). The test measures the time taken to build new elements and clone nodes deep.

**Options Compared**

There are two options compared:

1. **CreateElement**: This approach creates HTML elements directly using the `document.createElement` method, passing in the tag name, properties (in an object), and child elements as arguments.
2. **Template Element**: This approach uses a template element (`articleTemplate`) to define the structure of the HTML, and then clones this element using the `cloneNode(true)` method.

**Pros and Cons**

1. **CreateElement**
	* Pros:
		+ Easy to implement and understand
		+ Fast, as it avoids the overhead of parsing a template string
	* Cons:
		+ Can be verbose for complex structures
		+ May lead to memory leaks if not properly cleaned up
2. **Template Element**
	* Pros:
		+ Reduces verbosity and improves code readability
		+ Easier to manage complex structures and dynamic content
	* Cons:
		+ Slower due to the overhead of parsing a template string
		+ May require additional setup (e.g., defining the template element)

**Library: Template Elements**

The `articleTemplate` variable is an instance of a HTML template element, which is a feature introduced in HTML5. This element allows you to define a structured content block that can be cloned and manipulated.

**Special JS Feature/ Syntax: None**

There are no special JavaScript features or syntax used in this benchmark.

**Alternative Approaches**

Other approaches to building HTML elements could include:

1. **String Interpolation**: Using string interpolation techniques (e.g., template literals) to build HTML strings.
2. **DOM Manipulation**: Using DOM manipulation libraries like jQuery or React to construct and manipulate the DOM.
3. **HTML Builders**: Using libraries specifically designed for building HTML, such as HBS (Handlebars.js) or Mustache.

Each of these approaches has its own trade-offs in terms of performance, complexity, and maintainability. The choice of approach depends on the specific use case and requirements of the project.

Related benchmarks:

Template vs CreateElement (version: 1)

Comparing performance of: Build new elements vs Clone node deep

Created: 6 years ago by: Registered User

Jump to the latest result

Build new elements

Clone node deep

Suite status: <idle, ready to run>

Fastest: N/A

Slowest: N/A

Autogenerated LLM Summary (model llama3.2:3b, generated one year ago):