Run results for: templateTag vs html parse

Run details:

User agent: Mozilla/5.0 (Windows NT 10.0; Win64; x64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/127.0.0.0 Safari/537.36

Browser: Chrome 127

Operating system: Windows

Device Platform: Desktop

Date tested: 2 years ago

Benchmark engine: Benchmark.js

cached template tag

339K/s

html parse

114K/s

template tag repeated creation

74K/s

View exact numbers

Test name	Executions per second
✓ cached template tag	339,266 Ops/sec
html parse	113,590 Ops/sec
template tag repeated creation	74,191 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