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:

Suite status: <idle, ready to run>

Previous results

Test case name	Result
Fragment
Template 1
Template 2
Parser

Fastest: N/A

Slowest: N/A

Latest run results:

No previous run results

This benchmark does not have any results yet. Be the first one to run it!

Autogenerated LLM Summary (model llama3.2:3b, generated one year ago):

LLMs can make mistakes. Check important info.

Let's dive into the world of JavaScript microbenchmarks on MeasureThat.net.

**Benchmark Overview**

The provided benchmark is designed to measure the performance of creating DOM nodes using different approaches. The benchmark consists of four test cases:

1. **Fragment**: Measures the time it takes to create a `DocumentRange` and retrieve an element by its ID.
2. **Template 1**: Measures the time it takes to create a new template element, set its inner HTML, and retrieve the first child element.
3. **Template 2**: Measures the time it takes to create a new template element, set its inner HTML, and retrieve the element with a specific ID using the `content` property.
4. **Parser**: Measures the time it takes to parse an HTML string and retrieve an element by its ID.

**Options Compared**

The benchmark compares four different approaches:

1. Using the `DocumentRange` API to create DOM nodes (`Fragment` test case).
2. Creating a new template element and manipulating its content (`Template 1` and `Template 2` test cases).
3. Parsing an HTML string using the `DOMParser` API (`Parser` test case).

**Pros and Cons**

Here's a brief analysis of each approach:

* **Fragment**: This method creates a `DocumentRange` object, which can be useful for creating complex DOM structures. However, it requires careful handling of the range to avoid errors.
* **Template 1**: Creating a new template element is straightforward, but setting its inner HTML and retrieving the first child element can be slow due to the DOM's layouting requirements.
* **Template 2**: This method uses the `content` property to retrieve elements within the template, which can be more efficient than using the `firstElementChild` property. However, it may not work as expected if the template has a complex structure.
* **Parser**: Parsing an HTML string is generally slower than creating DOM nodes directly, but it provides a flexible way to handle complex HTML structures.

**Library and Purpose**

The benchmark uses the following libraries:

* `DOMParser`: Used to parse an HTML string and retrieve elements by their ID (Parser test case).
* `DocumentRange`: Used to create complex DOM structures (Fragment test case).

These libraries are part of the W3C specification and provide a standardized way to work with HTML documents in JavaScript.

**Special JS Features or Syntax**

The benchmark uses some special features of modern JavaScript:

* **Template literals**: Used to create string templates for the `template` variables (Template 1 and Template 2 test cases).
* **Arrow functions**: Used in the `reduce()` method to define a concise function expression (Template 1 test case).

**Other Alternatives**

If you're interested in exploring alternative approaches, here are some options:

* **Sizzle.js**: A CSS selector library that can be used to traverse and manipulate DOM nodes.
* **QuerySelector.js**: A lightweight library for selecting elements using CSS selectors.

Keep in mind that these alternatives may have different performance characteristics or use cases compared to the benchmark's approaches.

Related benchmarks:

Create DOM nodes v2 (version: 0)

Comparing performance of: Fragment vs Template 1 vs Template 2 vs Parser

Created: 3 years ago by: Registered User

Jump to the latest result

Fragment

Template 1

Template 2

Parser

Suite status: <idle, ready to run>

Fastest: N/A

Slowest: N/A

No previous run results

Autogenerated LLM Summary (model llama3.2:3b, generated one year ago):