Benchmark: querySelector VS querySelectorAll VS getElementsByClassName VS getElementsByID

querySelector VS querySelectorAll VS getElementsByClassName VS getElementsByID (version: 0) Benchmark.js

Try to get the order of magnitude of the difference in a simple case.

Comparing performance of: `querySelector (className) vs querySelectorAll (className) vs getElementsByClassName vs querySelector (elemID) vs querySelectorAll (elemID) vs getElementsByID`

Created: 2 years ago by: Guest

Go to the latest result

HTML Preparation code:

<div class="test" id="test1"></div>
<div class="test" id="test2"></div>
<div class="test" id="test3"></div>
<div class="test" id="test4"></div>

Tests:

querySelector (className)
document.querySelector(".test")
querySelectorAll (className)
document.querySelectorAll(".test")
getElementsByClassName
document.getElementsByClassName(".test")
querySelector (elemID)
document.querySelector("#test1")
querySelectorAll (elemID)
document.querySelectorAll("#test1")
getElementsByID
document.getElementById("test1")

Rendered benchmark preparation results:

Suite status: <idle, ready to run>

Previous results

Test case name	Result
querySelector (className)
querySelectorAll (className)
getElementsByClassName
querySelector (elemID)
querySelectorAll (elemID)
getElementsByID

Fastest: N/A

Slowest: N/A

Latest run results:

Run details: (Test run date: 2 years ago)

User agent: Mozilla/5.0 (Macintosh; Intel Mac OS X 10.15; rv:123.0) Gecko/20100101 Firefox/123.0

Browser/OS: Firefox 123 on Mac OS X 10.15

View result in a separate tab

getElementsByID

5.7M/s

getElementsByClassName

5.6M/s

querySelector (className)

3.0M/s

querySelector (elemID)

2.9M/s

querySelectorAll (className)

1.3M/s

querySelectorAll (elemID)

1.1M/s

View exact numbers

Test name	Executions per second
✓ getElementsByID	5,713,954 Ops/sec
getElementsByClassName	5,571,702 Ops/sec
querySelector (className)	2,981,195 Ops/sec
querySelector (elemID)	2,881,980 Ops/sec
querySelectorAll (className)	1,301,309 Ops/sec
querySelectorAll (elemID)	1,094,597 Ops/sec

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

LLMs can make mistakes. Check important info.

I'd be happy to help you understand what's being tested in the provided benchmark.

**What is being tested?**

The benchmark measures the performance of four different DOM querying methods:

1. `document.querySelector` (and its variants with class name and element ID)
2. `document.querySelectorAll` (and its variant with element ID)

These methods are used to select elements from a HTML document based on their CSS selectors.

**Options compared:**

The benchmark compares the performance of each method under two main scenarios:

1. **Class Name**: The first three test cases (`querySelector`, `querySelectorAll`, and `getElementsByClassName`) compare the performance of selecting elements by class name (`.test`).
2. **Element ID**: The last four test cases (`querySelector`, `querySelectorAll`, `getById`, and `getElementsByID`) compare the performance of selecting elements by element ID (`#test1`).

**Pros and Cons of each approach:**

* `document.querySelector` and `document.querySelectorAll` are generally faster than `getElementsByClassName` because they use CSS selectors under the hood, which are optimized for performance. However, they may not work as expected if the selector is too complex or specific.
* `document.querySelector` with class name and element ID variants are similar in terms of performance, but the element ID variant might be slightly faster due to the more straightforward selection process.

**Library:**

None of the methods mentioned above rely on a specific library. However, it's worth noting that some JavaScript engines (like SpiderMonkey) optimize certain DOM querying methods for better performance.

**Special JS feature or syntax:**

* `document.querySelectorAll` uses a feature called "contentless" queries, which allows it to retrieve an array of elements without actually selecting them from the document tree. This can lead to faster results, but may not work as expected in some situations.
* `getElementsByClassName` and `getById` are part of the DOM Level 2 specification and have been supported by most browsers for a long time.

**Other alternatives:**

If you need even more fine-grained control over your DOM queries or if your use case requires it, consider using:

* `CSSOM` (CSS Object Model) APIs like `CSSRuleList`, `CSSStyleRule`, or `CSSStyleSheet`.
* `DocumentFragment` and `ElementGrouping` for more efficient manipulation of elements.
* Browser-specific APIs like Microsoft Edge's `querySelectorAll` with a "contains" option or Mozilla's `querySelectorAll` with a "deep" option.

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