Benchmark: Getting first element using querySelector vs querySelectorAll vs getElementsByClassName

HTML Preparation code:

<div id="test-container"></div>

Script Preparation code:

{
const elementCount = 1000;
const container = window.container = document.getElementById('test-container');
const fragment = document.createDocumentFragment();
const entities = window.entities = [];

for (let i=0; i < elementCount; i++) {
	const element = document.createElement('div');
	element.classList.add(`test-${i%4}`);
	element.setAttribute(`test`, i%4);
 	fragment.append(element);
	entities.push(element);
}
container.append(fragment);
}

Tests:

querySelector()
const randomID = 0|Math.random()*4; const result = window.container.querySelector(`.test-${randomID}`);
querySelectorAll()[0]
const randomID = 0|Math.random()*4; const result = window.container.querySelectorAll(`.test-${randomID}`)[0];
getElementsByClassname()[0]
const randomID = 0|Math.random()*4; const result = window.container.getElementsByClassName(`test-${randomID}`)[0];

Historical Performance Data aggregated from 5 community runs

Desktop Results:

Firefox 5 runs

getElementsByClassname()[0]

3.2M/s

querySelector()

2.6M/s

querySelectorAll()[0]

112K/s

Fastest: getElementsByClassname()[0] (28.9x faster)

View exact numbers

✓ getElementsByClassname()[0]: 3,233,479 ops/sec
• querySelector(): 2,612,339 ops/sec
• querySelectorAll()[0]: 111,915 ops/sec

Results show median performance across all community submissions. Run this benchmark yourself to verify on your device.

Rendered benchmark preparation results:

Suite status: <idle, ready to run>

Previous results

Test case name	Result
querySelector()
querySelectorAll()[0]
getElementsByClassname()[0]

Fastest: N/A

Slowest: N/A

Latest run results:

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

User agent: Mozilla/5.0 (Windows NT 10.0; Win64; x64; rv:149.0) Gecko/20100101 Firefox/149.0

Browser/OS: Firefox 149 on Windows

View result in a separate tab

getElementsByClassname()[0]

3.2M/s

querySelector()

2.6M/s

querySelectorAll()[0]

112K/s

View exact numbers

Test name	Executions per second
✓ getElementsByClassname()[0]	3,233,479 Ops/sec
querySelector()	2,612,339 Ops/sec
querySelectorAll()[0]	111,915 Ops/sec

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

LLMs can make mistakes. Check important info.

Let's break down the provided benchmark and explain what's being tested.

**Benchmark Overview**

The benchmark compares the performance of three different methods to retrieve an element from a container:

1. `querySelector`
2. `querySelectorAll()[0]` (which is equivalent to `querySelector` with a length of 1)
3. `getElementsByClassName()[0]`

**Options Compared**

These three options are compared because they have different performance characteristics and use cases.

* `querySelector`: This method selects the first element that matches the specified CSS selector. It's often considered the most efficient way to select an element, as it uses a more direct approach.
* `querySelectorAll()[0]`: This method returns an array-like object containing all elements that match the specified CSS selector. By accessing the first element of this array using `[0]`, we're effectively performing a `querySelector` operation with a length of 1, which is equivalent to calling `querySelector` directly. However, this approach still requires iterating over the resulting array.
* `getElementsByClassName()[0]`: This method returns an array-like object containing all elements that have the specified class name. Like `querySelectorAll()[0]`, it's not as efficient as `querySelector` because it needs to iterate over the matching elements.

**Pros and Cons**

Here's a summary of the pros and cons of each approach:

* `querySelector`: Fastest, most direct approach, but may be less intuitive for users who are not familiar with CSS selectors.
* `querySelectorAll()[0]`: Less efficient than `querySelector`, requires iterating over the resulting array. However, it can be useful when you need to retrieve multiple elements at once.
* `getElementsByClassName()[0]`: Slowest, as it needs to iterate over all matching elements.

**Library: `document`**

The `document` object is a built-in JavaScript object that represents the HTML document. In this benchmark, we're using various methods of the `document` object to retrieve an element from a container.

**Special JS Feature/Syntax**

None mentioned in the provided benchmark definition. However, note that the use of template literals (e.g., `const randomID = 0|Math.random()*4;`) is a modern JavaScript feature introduced in ECMAScript 2015.

**Other Alternatives**

If you're interested in exploring other alternatives for this benchmark, here are a few options:

* Using `querySelector` with an CSS selector that includes the class name (`document.querySelector('.test-${randomID}')`).
* Using `innerHTML` or `textContent` to retrieve the element's text content instead of its actual element.
* Using a different container element type (e.g., `div`, `span`) or adding more complex structure to the container.

Keep in mind that these alternatives may change the performance characteristics and behavior of the benchmark, so you'll need to adjust the test cases accordingly.

Getting first element using querySelector vs querySelectorAll vs getElementsByClassName (version: 0)

Comparing performance of: `querySelector() vs querySelectorAll()[0] vs getElementsByClassname()[0]`

Created: 2 years ago by: Guest

Go to the latest result

querySelector()

querySelectorAll()[0]

getElementsByClassname()[0]

Historical Performance Data aggregated from 5 community runs

Desktop Results:

Firefox 5 runs

Suite status: <idle, ready to run>

Fastest: N/A

Slowest: N/A

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

Getting first element using querySelector vs querySelectorAll vs getElementsByClassName (version: 0)

Comparing performance of: querySelector() vs querySelectorAll()[0] vs getElementsByClassname()[0]

Created: 2 years ago by: Guest

Go to the latest result

querySelector()

querySelectorAll()[0]

getElementsByClassname()[0]

Historical Performance Data aggregated from 5 community runs

Desktop Results:

Firefox 5 runs

Suite status: <idle, ready to run>

Fastest: N/A

Slowest: N/A

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

Related benchmarks

Comparing performance of: `querySelector() vs querySelectorAll()[0] vs getElementsByClassname()[0]`