Run results for: Building with HTMLTemplateElement

Run details:

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

Browser: Firefox 105

Operating system: Mac OS X 10.15

Device Platform: Desktop

Date tested: one year ago

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

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

Run results for: Building with HTMLTemplateElement

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