Benchmark: Building with HTMLTemplateElement

HTML Preparation code:

<script>
  const deadFrag = document.createElement('template').content;
  
  function mapAttrs([key, value]) {
    if (value && typeof value === 'object') {
      value = JSON.stringify(value);
    }

    if (value == null) return key;
    if (typeof value !== 'string' && key[0] !== ':') {
      key = ':' + key;
    }

    return `${ key }="${ value }"`;
  }

  function createHTMLCode(name, attrs, ...children) {
    const strAttrs = Object.entries(attrs || {}).map(mapAttrs).join(' ');
    return `<${ name } ${ strAttrs }>${ children.join('') }</${ name }>`;
  }


  const testLoops = 100000;
</script>

Tests:

Build each element using single template
const frag = deadFrag.cloneNode(); const temp = document.createElement('template'); for (let i = 0; i < testLoops; i++) { temp.innerHTML = createHTMLCode( 'x-fake-element', { id: `test-${ i }`, 'data-index': i, } ); frag.appendChild(temp.content.firstElementChild); } temp.innerHTML = '';
Build each element using new template
const frag = deadFrag.cloneNode(); for (let i = 0; i < testLoops; i++) { const temp = document.createElement('template'); temp.innerHTML = createHTMLCode( 'x-fake-element', { id: `test-${ i }`, 'data-index': i, } ); frag.appendChild(temp.content.firstElementChild); temp.innerHTML = ''; }
Build all elements using single template
const frag = deadFrag.cloneNode(); const temp = document.createElement('template'); let html = ''; for (let i = 0; i < testLoops; i++) { html += createHTMLCode( 'x-fake-element', { id: `test-${ i }`, 'data-index': i, } ); } frag.appendChild(temp.content); temp.innerHTML = '';
Build each element using new element
const frag = deadFrag.cloneNode(); for (let i = 0; i < testLoops; i++) { const el = document.createElement('x-fake-element'); el.id = `test-${ i }`; el.dataset.index = i; frag.appendChild(el); }
Build each element using cloned element
const frag = deadFrag.cloneNode(); let clone; for (let i = 0; i < testLoops; i++) { const el = clone ? clone.cloneNode(true) : document.createElement('x-fake-element'); el.id = `test-${ i }`; el.dataset.index = i; frag.appendChild(el); clone = el; }

Rendered benchmark preparation results:

Suite status: <idle, ready to run>

Previous results

Test case name	Result
Build each element using single template
Build each element using new template
Build all elements using single template
Build each element using new element
Build each element using cloned element

Fastest: N/A

Slowest: N/A

Latest run results:

No previous run results

This benchmark does not have any results yet. Be the first one to run it!

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

LLMs can make mistakes. Check important info.

I'll break down the provided benchmark definition and test cases for you.

**Benchmark Definition:**

The benchmark measures the performance of different approaches to building HTML elements in JavaScript. It uses the `HTMLTemplateElement` API, which provides a way to create and manipulate HTML templates in the browser.

**Options Compared:**

The benchmark compares four different approaches:

1. **Build all elements using single template**: This approach creates a single template element, populates it with child elements, and then clones the template to create multiple instances.
2. **Build each element using cloned element**: This approach creates individual element nodes (e.g., `x-fake-element`) and clones them repeatedly to populate a fragment element.
3. **Build each element using new element**: This approach creates individual element nodes and appends them directly to a fragment element.
4. **Build each element using cloned element with a clone variable**: This approach is similar to the previous one but uses a `clone` variable to store the result of cloning an element, allowing for more efficient reuse.

**Pros and Cons:**

1. **Build all elements using single template**:
	* Pros: Can be more memory-efficient since only one template needs to be created.
	* Cons: May lead to slower performance due to the overhead of creating a single template and cloning it repeatedly.
2. **Build each element using cloned element**:
	* Pros: Allows for more control over individual elements and can be more efficient since only one clone is needed.
	* Cons: Requires more memory and CPU cycles since multiple clones are created.
3. **Build each element using new element**:
	* Pros: Simple and straightforward approach with minimal overhead.
	* Cons: May lead to slower performance due to the need to create and append individual elements repeatedly.
4. **Build each element using cloned element with a clone variable**:
	* Pros: Combines the benefits of approaches 2 and 3, allowing for efficient reuse of clones.
	* Cons: Requires more complexity and memory management compared to approach 2.

**Library and Purpose:**

The `HTMLTemplateElement` API is a part of the HTML Standards. It provides a way to create and manipulate HTML templates in the browser, which can be useful for rendering dynamic content efficiently.

**Browser and Device Details:**

The benchmark results are reported for Firefox 105 running on a Mac OS X 10.15 device. The `DevicePlatform` field indicates that the test was run on a desktop environment.

I hope this explanation helps you understand the benchmark definition and options compared!

Related benchmarks:

Building with HTMLTemplateElement (version: 1)

Comparing performance of: Build each element using single template vs Build each element using new template vs Build all elements using single template vs Build each element using new element vs Build each element using cloned element

Created: 3 years ago by: Registered User

Jump to the latest result

Build each element using single template

Build each element using new template

Build all elements using single template

Build each element using new element

Build each element using cloned element

Suite status: <idle, ready to run>

Fastest: N/A

Slowest: N/A

No previous run results

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