Benchmark: Create DOM nodes v2

Script Preparation code:

var html = `
  <div>
    <ul>
      <li id="component">Hello</li>
    </ul>
  </div>
`

Tests:

Fragment
const fragment = document .createRange() .createContextualFragment(html) .getElementById('component') console.log(fragment)
Template 1
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 template = document.createElement('template') template.innerHTML = html const template2 = template.content.getElementById('component') console.log(template2)
Parser
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: one year ago)

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

Browser/OS: Chrome 108 on Mac OS X 10.15.7

Create DOM nodes v2 (version: 0)