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];

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: 4 months ago)

User agent: Mozilla/5.0 (X11; Linux x86_64; rv:146.0) Gecko/20100101 Firefox/146.0

Browser/OS: Firefox 146 on Linux

View result in a separate tab

Test name	Executions per second
querySelector()	6360135.0 Ops/sec
querySelectorAll()[0]	283136.8 Ops/sec
getElementsByClassname()[0]	7618184.5 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.

Related benchmarks:

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

Jump to the latest result

querySelector()

querySelectorAll()[0]

getElementsByClassname()[0]

Suite status: <idle, ready to run>

Fastest: N/A

Slowest: N/A

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