Run results for: Building with HTMLTemplateElement

Run details:

User agent: Mozilla/5.0 (Macintosh; Intel Mac OS X 10_15_7) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/103.0.0.0 Safari/537.36

Browser: Chrome 103

Operating system: Mac OS X 10.15.7

Device Platform: Desktop

Date tested: one year ago

Test name	Executions per second
Build each element using single template	3.7 Ops/sec
Build each element using new template	2.4 Ops/sec
Build all elements using single template	15.8 Ops/sec
Build each element using new element	7.5 Ops/sec
Build each element using cloned element	8.9 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