Benchmark: querySelector vs getElementsByClassName with multiple elements

HTML Preparation code:

<div class="test"></div>
<div class="test2"></div>
<div class="test3"></div>
<div class="test4"></div>
<div class="test5"></div>
<div class="test6"></div>
<div class="test7"></div>

Tests:

querySelector
document.querySelector(".test")
getElementsByClassName
document.getElementsByClassName(".test")

Rendered benchmark preparation results:

Suite status: <idle, ready to run>

Previous results

Test case name	Result
querySelector
getElementsByClassName

Fastest: N/A

Slowest: N/A

Latest run results:

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

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

Browser/OS: Chrome 141 on Windows

View result in a separate tab

Test name	Executions per second
querySelector	13855824.0 Ops/sec
getElementsByClassName	17454082.0 Ops/sec

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

LLMs can make mistakes. Check important info.

Let's dive into the explanation of the provided benchmark.

**What is being tested?**

The benchmark measures the performance difference between two JavaScript methods:

1. `document.querySelector()` (also known as "CSS selector" or "query by class")
2. `document.getElementsByClassName()`

These methods are used to select elements from a DOM document based on their class name, attribute value, or pseudo-class.

**Options being compared**

The benchmark compares the performance of both methods when applied to a large number of elements with different class names (`test1`, `test2`, ..., `test7`).

**Pros and Cons of each approach:**

1. **querySelector()**
	* Pros:
		+ More efficient, as it only returns the first matching element.
		+ Less memory-intensive, as it doesn't create a NodeList or HTMLCollection.
	* Cons:
		+ May be slower for some browsers, especially older ones, due to its more complex parsing algorithm.
		+ Can be less reliable in certain cases (e.g., when using pseudo-classes like `:hover`).
2. **getElementsByClassName()**
	* Pros:
		+ Generally faster and more reliable than querySelector(), as it's a simpler algorithm.
		+ Can return all matching elements, not just the first one.
	* Cons:
		+ More memory-intensive, as it creates a NodeList or HTMLCollection with all matching elements.
		+ Returns an array-like object, which can be slower for certain operations.

**Library usage**

There is no library explicitly mentioned in the benchmark. However, `document` and its methods (`querySelector`, `getElementsByClassName`) are part of the DOM (Document Object Model) API, which is a built-in JavaScript API.

**Special JS features or syntax**

None mentioned in this specific benchmark.

**Other considerations**

The benchmark uses a simple HTML document with multiple elements having different class names. The script preparation code and HTML preparation code are minimal, ensuring that only the query methods are being tested.

**Alternative approaches**

Other options for selecting elements from the DOM include:

* `document.querySelectorAll()` (a more efficient alternative to `getElementsByClassName`)
* `Element.prototype.matches()` or `Element.prototype.contains()`
* Regular expressions (`/element selector/`)

Keep in mind that each approach has its strengths and weaknesses, and performance differences may vary depending on specific use cases, browser versions, and other factors.

Related benchmarks:

querySelector vs getElementsByClassName with multiple elements (version: 0)

Comparing performance of: querySelector vs getElementsByClassName

Created: 3 years ago by: Guest

Jump to the latest result

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):