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 month 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

Test name	Executions per second
DOMParser	12688.2 Ops/sec
write	6134.0 Ops/sec
setHTMLUnsafe	5843.3 Ops/sec
innerHTML	13917.3 Ops/sec
createHTMLDocument	10195.1 Ops/sec
createRange	6770.5 Ops/sec
template	6101.8 Ops/sec
parseHTMLUnsafe	5748.3 Ops/sec

Autogenerated LLM Summary (model gpt-4o-mini, generated one month ago):

LLMs can make mistakes. Check important info.

The benchmark defined in the JSON provided is designed to evaluate various methods of parsing HTML strings in JavaScript. Each method is compared based on the number of executions per second, which gives an indication of performance and efficiency. The benchmark uses several approaches, each with its own underlying behavior and potential advantages or drawbacks.

### Comparison of Options

1. **DOMParser**:
   - **Description**: Uses the `DOMParser` API to convert a string of HTML into a DOM Document.
   - **Pros**: 
     - Well-suited for parsing well-formed HTML.
     - Safer against XSS since it creates a new document.
   - **Cons**:
     - Can be slower than other options for large inputs.

2. **write**:
   - **Description**: Utilizes `document.implementation.createHTMLDocument()` and the `write()` method to parse the HTML.
   - **Pros**: 
     - Allows writing of HTML directly to a new document, resulting in a complete parse.
   - **Cons**:
     - `write()` can be less efficient as it forces a re-parsing of the entire document structure.

3. **setHTMLUnsafe**:
   - **Description**: A custom method (assumed to be defined elsewhere) that sets the inner HTML of a `template` element directly.
   - **Pros**: 
     - May have optimized parsing logic for specific use cases.
   - **Cons**:
     - Potential security risks if not properly managed.

4. **innerHTML**:
   - **Description**: Directly sets the `innerHTML` property of a `div` element to the HTML string.
   - **Pros**: 
     - Simple and straightforward usage. Very quick for small fragments.
   - **Cons**:
     - May have performance issues and vulnerabilities with large or complex HTML, as it requires parsing without a context.

5. **createHTMLDocument**:
   - **Description**: Similar to `write`, it creates a new HTML document and sets its body’s inner HTML.
   - **Pros**: 
     - Creates a new document context, which can be cleaner and more structured.
   - **Cons**:
     - Might be slower and requires more memory overhead due to document creation.

6. **createRange**:
   - **Description**: Uses a `Range` object to create a contextual fragment from the HTML string.
   - **Pros**: 
     - Useful for inserting fragments into the DOM efficiently.
   - **Cons**:
     - Potential limitations in handling large inputs effectively.

7. **template**:
   - **Description**: Uses a `<template>` element to temporarily hold the HTML before accessing its content.
   - **Pros**: 
     - Provides a safe and efficient way of creating reusable HTML structures.
   - **Cons**:
     - The initial overhead of creating a template may not always justify the performance gain.

8. **parseHTMLUnsafe**:
   - **Description**: A method likely introduced to parse HTML strings without safety guarantees (assumed to be defined elsewhere).
   - **Pros**: 
     - May be faster due to the lack of checks.
   - **Cons**:
     - High risk of XSS vulnerabilities if the HTML isn't controlled or sanitized.

### Other Considerations

- **Security**: Security implications are significant, particularly with methods like `innerHTML`, `setHTMLUnsafe`, and `parseHTMLUnsafe` where user-generated content can be directly parsed. Developers must be cautious to avoid introducing vulnerabilities.
- **Readability and Maintainability**: Different methods may have diverse impacts on code readability. Developers may prefer methods that are clearer and maintainable over sheer performance if the speed differences are negligible.

### Alternatives

Beyond the methods tested, alternate approaches include:

- **Using Libraries**: Libraries like jQuery provide methods like `$.parseHTML()`, which can abstract some complexities and enhance cross-browser compatibility.
- **Custom Parsers**: For special use cases, engineers could consider writing custom parsers using regex or streaming techniques that optimize for very specific HTML structures.
- **Server-side Processing**: For applications that can offload processing, using server-side HTML parsers and sending pre-parsed content to the client can sometimes be more efficient, albeit at the cost of increased server load and round-trip times.

In conclusion, the choice of parsing method can be driven by specific needs related to performance, security, and ease of use, and each approach presents trade-offs that should be carefully evaluated based on the application's requirements.

Related benchmarks:

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 month ago by: Guest

Jump to the latest result

DOMParser

write

setHTMLUnsafe

innerHTML

createHTMLDocument

createRange

template

parseHTMLUnsafe

Suite status: <idle, ready to run>

Experimental features:

Fastest: N/A

Slowest: N/A

Autogenerated LLM Summary (model gpt-4o-mini, generated one month ago):