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

ⓘ Get performance results from real users on your website with Request Metrics.

Website Performance Monitoring by Request Metrics

Latest run results:

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

User agent: Mozilla/5.0 (Macintosh; Intel Mac OS X 10.15; rv:105.0) Gecko/20100101 Firefox/105.0

Browser/OS: Firefox 105 on Mac OS X 10.15

View result in a separate tab

Test name	Executions per second
Build each element using single template	4.1 Ops/sec
Build each element using new template	3.4 Ops/sec
Build all elements using single template	14.3 Ops/sec
Build each element using new element	9.5 Ops/sec
Build each element using cloned element	11.6 Ops/sec

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: one year 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>

Experimental features:

Fastest: N/A

Slowest: N/A