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'. We test two different methods : - Create elements from HTML string using DOMParser and use querySelectorAll to build controller - Create elements from createElement method and build controller from them 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]);
}

​x
 
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
}

 
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

Experimental features:

Memory measurements supported only in Chrome.
For precise memory measurements Chrome must be launched with --enable-precise-memory-info flag.
More information: Monitoring JavaScript Memory

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):

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:

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

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: