Benchmark: templateTag vs html parse

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;

Rendered benchmark preparation results:

Suite status: <idle, ready to run>

Previous results

Test case name	Result
template tag repeated creation
cached template tag
html parse

Fastest: N/A

Slowest: N/A

ⓘ Get performance results from real users on your website with Request Metrics.

Website Performance Monitoring by Request Metrics

Latest run results:

Run details: (Test run date: 2 months ago)

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/OS: Chrome 127 on Windows

View result in a separate tab

Test name	Executions per second
template tag repeated creation	74190.9 Ops/sec
cached template tag	339265.8 Ops/sec
html parse	113590.2 Ops/sec

templateTag vs html parse (version: 2)

Compare the template tag cloning vs string parse.

Comparing performance of: template tag repeated creation vs cached template tag vs html parse

Created: 3 years ago by: Registered User

Jump to the latest result

template tag repeated creation

cached template tag

html parse

Suite status: <idle, ready to run>

Experimental features:

Fastest: N/A

Slowest: N/A