Benchmark: getElementById vs querySelector vs getElementsByClassName v2

HTML Preparation code:

<div id="unique" class="unique" name="unique" data-unique="1">test</div>

Script Preparation code:

var uniques = document.getElementsByClassName('unique');

Tests:

getElementById
var test = document.getElementById('unique').innerHTML;
querySelector
var test = document.querySelector('.unique').innerHTML;
getElementsByClassName
var test = uniques[0].innerHTML;

Rendered benchmark preparation results:

Suite status: <idle, ready to run>

Previous results

Test case name	Result
getElementById
querySelector
getElementsByClassName

Fastest: N/A

Slowest: N/A

Latest run results:

Run details: (Test run date: 5 months ago)

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

Browser/OS: Chrome 145 on Windows

View result in a separate tab

getElementsByClassName

6.2M/s

getElementById

6.1M/s

querySelector

5.5M/s

View exact numbers

Test name	Executions per second
✓ getElementsByClassName	6,249,308 Ops/sec
getElementById	6,132,273 Ops/sec
querySelector	5,541,710 Ops/sec

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

LLMs can make mistakes. Check important info.

Let's break down what's being tested in this JavaScript microbenchmark, and explore the pros and cons of each approach.

**What is being tested?**

The benchmark measures the performance of three ways to retrieve a single DOM element from an HTML document:

1. `getElementById`: Using the `document.getElementById()` method to find an element by its ID.
2. `querySelector`: Using the `document.querySelector()` method with a CSS selector to find an element that matches a specific class or attribute.
3. `getElementsByClassName` (version 2): Using the `document.getElementsByClassName()` method with a CSS selector to find all elements that match a specific class.

**Options compared**

The three options are being compared in terms of their execution speed, measured in executions per second.

**Pros and cons of each approach:**

1. **getElementById**: This method is straightforward and efficient when the element's ID is known in advance. However, it can be slower than other methods if the element's ID is generated dynamically or not unique.
	* Pros: Fast, reliable, and well-supported across browsers.
	* Cons: Can be slow for dynamic elements or multiple elements with the same ID.
2. **querySelector**: This method provides more flexibility and power than `getElementById`, as it can search for elements using CSS selectors. However, it may be slower due to the complexity of parsing the selector.
	* Pros: More flexible and powerful, but potentially slower.
	* Cons: Can be slower due to the complexity of parsing the selector.
3. **getElementsByClassName**: This method is similar to `querySelector`, but uses a simpler syntax to find elements by class name. However, it returns an array of all matching elements, which can lead to slower performance if only one element is needed.
	* Pros: Simple and fast for finding multiple elements with the same class.
	* Cons: Returns an array, which can be slow if not necessary.

**Library used**

In this benchmark, the `getElementsByClassName` method uses the `document.getElementsByClassName()` function from the DOM API. This library is part of the standard HTML5 specification and is widely supported across browsers.

**Special JavaScript features or syntax**

None mentioned in this benchmark.

**Other alternatives**

There are other ways to retrieve a single DOM element:

* Using `querySelectorAll()`: Similar to `getElementsByClassName`, but returns an array of all matching elements.
* Using `closest()` (modern browsers): Returns the closest ancestor element that matches a selector.
* Using `getElementAt()` or `elementFromPoint()` (more advanced approaches): Can be used to retrieve an element by its position on the page.

It's worth noting that some of these alternatives may have different performance characteristics or trade-offs, and might not be suitable for every use case.

getElementById vs querySelector vs getElementsByClassName v2 (version: 0)

Test performance of different ways of get just one particular DOM element

Comparing performance of: `getElementById vs querySelector vs getElementsByClassName`

Created: 7 years ago by: Registered User

Go to the latest result

getElementById

querySelector

getElementsByClassName

Suite status: <idle, ready to run>

Fastest: N/A

Slowest: N/A

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

getElementById vs querySelector vs getElementsByClassName v2 (version: 0)

Test performance of different ways of get just one particular DOM element

Comparing performance of: getElementById vs querySelector vs getElementsByClassName

Created: 7 years ago by: Registered User

Go to the latest result

getElementById

querySelector

getElementsByClassName

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: `getElementById vs querySelector vs getElementsByClassName`