Benchmark: querySelectorAll.length vs getAttribute

HTML Preparation code:

<div id="testBody"></div>

Script Preparation code:

const elementCount = 100000;
const body = document.getElementById('testBody');
body.setAttribute('data-items-count', elementCount);
// Create a Bunch of DOM elements.
// Keep a refrence to all of them to test the other loops.
window.entities = [];
for (let i=0; i < elementCount; i++) {
 let elm = document.createElement('div');
 elm.classList.add(`test`);
 elm.setAttribute(`test`, i%4);
 // Add to body for query selector tests.
 body.appendChild(elm);
 // Add to array for loop tests.
 window.entities.push(elm);
}

Tests:

querySelectorAll
const itemsCount = window.testBody.querySelectorAll('.test').length;
getAttribute
const itemsCount = window.testBody.getAttribute('data-items-count');
dataset
const itemsCount = window.testBody.dataset.itemsCount;

Rendered benchmark preparation results:

Suite status: <idle, ready to run>

Previous results

Test case name	Result
querySelectorAll
getAttribute
dataset

Fastest: N/A

Slowest: N/A

Latest run results:

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

User agent: Mozilla/5.0 (Linux; Android 13; SM-F721B) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/111.0.0.0 Mobile Safari/537.36

Browser/OS: Chrome Mobile 111 on Android

View result in a separate tab

Test name	Executions per second
querySelectorAll	408.3 Ops/sec
getAttribute	1487848.6 Ops/sec
dataset	1156512.9 Ops/sec

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

LLMs can make mistakes. Check important info.

Let's break down what is tested in the provided JSON benchmark.

**Benchmark Overview**

The benchmark compares three different approaches to retrieve the number of elements in an HTML element: `getAttribute`, `dataset`, and `querySelectorAll`. The test creates a large number (100,000) of DOM elements and stores them in an array (`window.entities`). The goal is to measure which approach is faster.

**Test Cases**

There are three individual test cases:

1. **`querySelectorAll`**: Retrieves the length of all elements with the class `test` inside the element with the id `testBody`.
2. **`getAttribute`**: Retrieves the value of the attribute `data-items-count` from the element with the id `testBody`.
3. **`dataset`**: Retrieves the value of the property `itemsCount` from the element's dataset (a mechanism to store custom data attributes).

**Approach Comparison**

Here's a brief analysis of each approach:

* **`querySelectorAll`**: This method uses the CSS selector syntax to match elements and then returns an array of matching elements. It is generally considered slower than other approaches because it has to parse the DOM tree and create an array of matches.
	+ Pros: Easy to use, intuitive API.
	+ Cons: Generally slower, can be less efficient for large datasets.
* **`getAttribute`**: This method uses the `getAttribute` method to retrieve a specific attribute value from an element. It is generally faster than `querySelectorAll` because it only needs to access one attribute value.
	+ Pros: Fast, simple API.
	+ Cons: May require more DOM manipulations if multiple attributes need to be accessed.
* **`dataset`**: This method uses the dataset property to store custom data attributes on an element. It is generally faster than `querySelectorAll` and can be more efficient for large datasets because it only needs to access one value.
	+ Pros: Fast, simple API.
	+ Cons: Requires support for modern browsers and may not work in older browsers.

**Library Usage**

None of the test cases uses a specific library. The benchmark relies on built-in JavaScript methods (`getAttribute`, `dataset`) or CSS selectors (`querySelectorAll`).

**Special JS Features/Syntax**

There are no special features or syntax used in this benchmark that would require advanced knowledge of JavaScript.

**Alternatives**

If you want to improve the performance of your DOM queries, consider using:

* **` querySelector`**: Similar to `querySelectorAll`, but returns a single element instead of an array.
* **`closest` and `nextElementSibling`**: Can be used in combination to retrieve elements without having to traverse the entire DOM tree.
* **`requestAnimationFrame`**: Can be used to optimize performance-critical loops by using a requestAnimationFrame callback to schedule updates.

Keep in mind that the best approach will depend on your specific use case, browser support requirements, and performance considerations.

Related benchmarks:

querySelectorAll.length vs getAttribute (version: 0)

Comparing performance of: querySelectorAll vs getAttribute vs dataset

Created: one year ago by: Guest

Jump to the latest result

querySelectorAll

getAttribute

dataset

Suite status: <idle, ready to run>

Experimental features:

Fastest: N/A

Slowest: N/A

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