Run results for: templateTag vs html parse

Run details:

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

Browser: Chrome 86

Operating system: Mac OS X 10.15.6

Device Platform: Desktop

Date tested: 3 years ago

Test name	Executions per second
template tag repeated creation	40732.7 Ops/sec
cached template tag	122494.3 Ops/sec
html parse	1560587.0 Ops/sec

Script Preparation code:

var html = '<div class="something"><p>This is a normal test between the <b>template tag cloning</b> vs <b>string parse</b>.</p><input type="text" /><div>name</div></div>';

function getTemplateTag() {
  const template = document.createElement('template');
  template.innerHTML = html;
  return template;
}

var cachedTemplate = getTemplateTag();

Tests:

template tag repeated creation
const template = getTemplateTag(); const fragment = document.importNode(template.content, true);
cached template tag
const fragment = document.importNode(cachedTemplate.content, true);
html parse
const template = getTemplateTag(); const fragment = template.content;

Run results for: templateTag vs html parse

Compare the template tag cloning vs string parse.

template tag repeated creation

cached template tag

html parse