Benchmark: Create DOM nodes 3

Tests:

Fragment
const html = ` <div> <ul> <li id="component">Hello</li> </ul> </div> ` const fragment = document .createRange() .createContextualFragment(html) .getElementById('component') console.log(fragment)
Template 1
const html = ` <div> <ul> <li id="component">Hello</li> </ul> </div> ` const template = document.createElement('template') template.innerHTML = html const template1 = Array(3).fill().reduce((template, current) => template.firstElementChild, template.content) console.log(template1)
Template 2
const html = ` <div> <ul> <li id="component">Hello</li> </ul> </div> ` const template = document.createElement('template') template.innerHTML = html const template2 = template.content.getElementById('component') console.log(template2)
Parser
const html = ` <div> <ul> <li id="component">Hello</li> </ul> </div> ` const parser = new DOMParser().parseFromString(html, 'text/html').getElementById('component') console.log(parser)

Rendered benchmark preparation results:

Previous results

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

Latest run results:

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

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

Browser/OS: Chrome 93 on Mac OS X 10.15.7

Create DOM nodes 3 (version: 0)