Benchmark: Generate HTML and get reference to element : DOMParser + querySelectorAll vs document.createElement

Generate HTML and get reference to element : DOMParser + querySelectorAll vs document.createElement (version: 1)

We want to build HTMLElements and get reference to some of them in an object named controller. Here we say we want reference to elements with an 'id'.<br> <br> We test two different methods :<br> - Create elements from HTML string using DOMParser and use querySelectorAll to build controller<br> - Create elements from createElement method and build controller from them<br> <br> Here we also put the generated DOM in a fragment because we want to be able to append generated DOM to any element

Comparing performance of: DOMParser + querySelectorAll vs document.createElement

Created: 2 years ago by: Registered User

Jump to the latest result

Tests:

DOMParser + querySelectorAll
let x = `<div class="wrapper"> <h1>Some title</h1> <p id="custom_1"></p> <span id="custom_2"></span> </div> <div>other</div>` let domp = new DOMParser(); let frag = document.createDocumentFragment(); let x_document = domp.parseFromString(x, 'text/html'); let ids = x_document.querySelectorAll("[id]"); let controller = {} for (let element of ids) { controller[element.getAttribute('id')] = element; } let nb_child = x_document.body.childNodes.length; let childNodes = x_document.body.childNodes; for (let i = 0; i < nb_child; i++) { frag.appendChild(childNodes[0]); }
document.createElement
let wrapper = document.createElement('div'); wrapper.classList.add('wrapper'); let h1 = document.createElement('h1') h1.textContent = 'Some title'; let p = document.createElement('p'); let span = document.createElement('span') let div = document.createElement('div'); div.textContent = 'other'; let frag = document.createDocumentFragment(); wrapper.append(h1,p,span); frag.append(wrapper, div); let controller = { custom_1: p, custom_2: span }

Rendered benchmark preparation results:

Suite status: <idle, ready to run>

Previous results

Test case name	Result
DOMParser + querySelectorAll
document.createElement

Fastest: N/A

Slowest: N/A

Latest run results:

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

User agent: Mozilla/5.0 (Windows NT 10.0; Win64; x64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/104.0.0.0 Safari/537.36

Browser/OS: Chrome 104 on Windows

View result in a separate tab

Test name	Executions per second
DOMParser + querySelectorAll	12046.6 Ops/sec
document.createElement	97692.9 Ops/sec

Autogenerated LLM Summary (model llama3.2:3b, generated 6 months ago):

LLMs can make mistakes. Check important info.

Let's break down what's being tested in this benchmark.

**Benchmark Purpose**

The benchmark compares two approaches to create HTML elements and get references to specific elements with an 'id' attribute:

1. **DOMParser + querySelectorAll**: This approach uses the `DOMParser` API to parse an HTML string, creates a fragment, and then uses `querySelectorAll` to select elements with an 'id' attribute.
2. **document.createElement**: This approach creates individual HTML elements using the `createElement` method and builds a controller object by assigning these elements to specific IDs.

**Options Compared**

The two approaches differ in how they create and manipulate the DOM:

* DOMParser + querySelectorAll:
	+ Uses an HTML string as input
	+ Creates a fragment to hold the generated DOM
	+ Uses `querySelectorAll` to select elements with an 'id' attribute
* document.createElement:
	+ Creates individual elements using `createElement`
	+ Assigns these elements to specific IDs in a controller object

**Pros and Cons of Each Approach**

Here are some pros and cons of each approach:

DOMParser + querySelectorAll:

Pros:

* Can handle complex HTML structures with ease
* Can be more efficient for large datasets, as it avoids creating individual elements

Cons:

* Requires parsing the entire HTML string, which can be slower for very large inputs
* May not work well with dynamic or constantly changing DOMs

document.createElement:

Pros:

* Creates individual elements that can be manipulated independently
* Easy to use and understand

Cons:

* Can be slower and more resource-intensive than using a parser like DOMParser
* Requires more manual effort to build the controller object

**Library Usage**

In this benchmark, the following libraries are used:

* `DOMParser`: A built-in JavaScript API for parsing HTML strings.
* `querySelectorAll`: A method provided by the W3C specification for selecting elements with specific attributes.

These libraries provide efficient ways to work with HTML documents and can simplify DOM manipulation.

**Special JS Features or Syntax**

None of the test cases use any special JavaScript features or syntax beyond what is standard in modern JavaScript development. Both approaches rely on basic DOM manipulation techniques.

**Alternatives**

If you were to implement this benchmark, you could also explore other approaches, such as:

* Using a library like jQuery to simplify DOM manipulation and create elements
* Using a templating engine like Mustache or Handlebars to generate HTML templates
* Implementing a custom parser or render function for more complex use cases

Keep in mind that each approach has its own trade-offs, and the best choice will depend on your specific requirements and constraints.

Related benchmarks: