Run results for: templateTag vs html parse

Run details:

User agent: Mozilla/5.0 (Linux; Android 10; K) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/136.0.0.0 Mobile Safari/537.36

Browser: Chrome Mobile 136

Operating system: Android

Device Platform: Mobile

Date tested: one year ago

Benchmark engine: Benchmark.js

cached template tag

58K/s

html parse

30K/s

template tag repeated creation

26K/s

View exact numbers

Test name	Executions per second
✓ cached template tag	58,420 Ops/sec
html parse	29,881 Ops/sec
template tag repeated creation	25,882 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