Benchmark: parsing html f324r

HTML Preparation code:

<!--your preparation HTML code goes here-->

Script Preparation code:

const doc = document.createDocumentFragment()
const parser = new DOMParser
let temp
let div
let range
let html = `<div>${'<button>hii</button>'.repeat(200)}</div>`
function go(parseMode) {
    switch (parseMode) {
        case 'DOMParser':
            var element = document.adoptNode(parser.parseFromString(html, 'text/html').body.firstElementChild)
            break
        case 'write': {
            let doc = document.implementation.createHTMLDocument()
            doc.write(html)
            var element = document.adoptNode(doc.body.firstElementChild)
        }
        break
    case 'setHTMLUnsafe': {
        temp ??= document.createElement('template')
        temp.setHTMLUnsafe(html)
        var element = document.adoptNode(temp.content.firstElementChild)
    }
    break
    case 'innerHTML': {
        div ??= document.createElement('div')
        div.innerHTML = html
        var element = div.removeChild(div.firstElementChild)
    }
    break
    case 'createHTMLDocument': {
        let n = document.implementation.createHTMLDocument()
        n.body.innerHTML = html
        var element = document.adoptNode(n.body.firstElementChild)
    }
    break
    case 'createRange':
        var element = document.adoptNode((range ??= document.createRange()).createContextualFragment(html).firstElementChild)
        break
    case 'template': {
        temp ??= document.createElement('template')
        temp.innerHTML = html
        var element = document.adoptNode(temp.content.firstElementChild)
    }
    break
    case 'parseHTMLUnsafe':
        var element = document.adoptNode(Document.parseHTMLUnsafe(html).body.firstElementChild)
        break
    }
    return element
}

Tests:

DOMParser
go('DOMParser')
write
go('write')
setHTMLUnsafe
go('setHTMLUnsafe')
innerHTML
go('innerHTML')
createHTMLDocument
go('createHTMLDocument')
createRange
go('createRange')
template
go('template')
parseHTMLUnsafe
go('parseHTMLUnsafe')

Rendered benchmark preparation results:

Suite status: <idle, ready to run>

Previous results

Test case name	Result
DOMParser
write
setHTMLUnsafe
innerHTML
createHTMLDocument
createRange
template
parseHTMLUnsafe

Fastest: N/A

Slowest: N/A

Latest run results:

Run details: (Test run date: one year ago)

User agent: Mozilla/5.0 (X11; Linux x86_64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/133.0.0.0 Safari/537.36 Edg/133.0.0.0

Browser/OS: Chrome 133 on Linux

View result in a separate tab

innerHTML

14K/s

DOMParser

13K/s

createHTMLDocument

10K/s

createRange

7K/s

write

6K/s

template

6K/s

setHTMLUnsafe

6K/s

parseHTMLUnsafe

6K/s

View exact numbers

Test name	Executions per second
✓ innerHTML	13,917 Ops/sec
DOMParser	12,688 Ops/sec
createHTMLDocument	10,195 Ops/sec
createRange	6,771 Ops/sec
write	6,134 Ops/sec
template	6,102 Ops/sec
setHTMLUnsafe	5,843 Ops/sec
parseHTMLUnsafe	5,748 Ops/sec

parsing html f324r (version: 1)

Comparing performance of: `DOMParser vs write vs setHTMLUnsafe vs innerHTML vs createHTMLDocument vs createRange vs template vs parseHTMLUnsafe`

Created: one year ago by: Guest

Go to the latest result

DOMParser

write

setHTMLUnsafe

innerHTML

createHTMLDocument

createRange

template

parseHTMLUnsafe

Suite status: <idle, ready to run>

Fastest: N/A

Slowest: N/A

parsing html f324r (version: 1)

Comparing performance of: DOMParser vs write vs setHTMLUnsafe vs innerHTML vs createHTMLDocument vs createRange vs template vs parseHTMLUnsafe

Created: one year ago by: Guest

Go to the latest result

DOMParser

write

setHTMLUnsafe

innerHTML

createHTMLDocument

createRange

template

parseHTMLUnsafe

Suite status: <idle, ready to run>

Fastest: N/A

Slowest: N/A

Related benchmarks

Comparing performance of: `DOMParser vs write vs setHTMLUnsafe vs innerHTML vs createHTMLDocument vs createRange vs template vs parseHTMLUnsafe`