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

Autogenerated LLM Sumamry (model llama3.2:3b, generated 20 days 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.

Latest run results:

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

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

Browser/OS: Firefox 115 on Windows

View result in a separate tab

Test name	Executions per second
getElementById	4607366.0 Ops/sec
querySelector	3107300.8 Ops/sec
getElementsByClassName	14032873.0 Ops/sec

Related benchmarks:

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: 6 years ago by: Registered User

Jump to the latest result

getElementById

querySelector

getElementsByClassName

Suite status: <idle, ready to run>

Experimental features:

Fastest: N/A

Slowest: N/A

Autogenerated LLM Sumamry (model llama3.2:3b, generated 20 days ago):