Benchmark: .getElementsByClassName() vs. .querySelectorAll()

HTML Preparation code:

<div class="foo">test</div>
<div class="bar">test</div>
<div class="foo">test</div>
<div class="bar">test</div>
<div class="foo">test</div>
<div class="bar">test</div>
<div class="foo">test</div>
<div class="bar">test</div>
<div class="foo">test</div>
<div class="bar">test</div>

Tests:

.getElementsByClassName()
Array.from(document.getElementsByClassName("foo")).forEach(item => {if(item.textContent === "test"){console.log("match")}});
.querySelectorAll()
document.querySelectorAll("foo").forEach(item => {if(item.textContent === "test"){console.log("match")}});

Rendered benchmark preparation results:

Suite status: <idle, ready to run>

Previous results

Test case name	Result
.getElementsByClassName()
.querySelectorAll()

Fastest: N/A

Slowest: N/A

Latest run results:

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

User agent: Mozilla/5.0 (Macintosh; Intel Mac OS X 10_15_7) AppleWebKit/605.1.15 (KHTML, like Gecko) Version/18.3.1 Safari/605.1.15

Browser/OS: Safari 18 on Mac OS X 10.15.7

View result in a separate tab

Test name	Executions per second
.getElementsByClassName()	306773.7 Ops/sec
.querySelectorAll()	17698132.0 Ops/sec

Autogenerated LLM Summary (model llama3.2:3b, generated 6 months ago):

LLMs can make mistakes. Check important info.

Let's dive into the benchmark.

The provided JSON represents a JavaScript microbenchmark test case on MeasureThat.net, titled ".getElementsByClassName() vs. .querySelectorAll()". This test compares the performance of two different approaches to retrieve elements from an HTML document:

1. **`getElementsByClassName()`**: This method returns a live HTMLCollection, which is an array-like object containing all elements that match the specified class name.
2. **`querySelectorAll()`**: This method also returns a NodeList (a static collection of nodes), which contains all elements that match the specified CSS selector.

**Comparison:**

The test case uses two individual scripts:

1. `Array.from(document.getElementsByClassName("foo")).forEach(...)`: This script uses `getElementsByClassName()` to retrieve an array of elements with class "foo" and then iterates through it using `forEach()`.
2. `document.querySelectorAll("foo").forEach(...)`: This script uses `querySelectorAll()` to retrieve a NodeList of elements that match the CSS selector "foo" and then iterates through it using `forEach()`.

**Options compared:**

The two options being compared are:

* **Live node list (getElementsByClassName())**: The method returns a live collection of elements, which can lead to performance issues if not handled correctly.
* **Static node list (querySelectorAll())**: The method returns a static collection of nodes, which is generally more efficient and reliable.

**Pros and Cons:**

* **`getElementsByClassName()`**:
	+ Pros:
		- Can be useful when working with dynamic or changing class names.
	+ Cons:
		- Returns a live collection, which can lead to unnecessary re-retrievals of the same elements on subsequent iterations.
		- May cause performance issues if not handled correctly (e.g., when iterating over the result set).
* **`querySelectorAll()`**:
	+ Pros:
		- Returns a static collection, which is generally more efficient and reliable.
		- Can be used with CSS selectors to retrieve multiple elements at once.

**Library/Functionality:**

In this test case, no external library or functionality is used. The `Array.from()` method is used to convert the HTMLCollection returned by `getElementsByClassName()` to an array-like object.

**Special JS feature/Syntax:**

The `forEach()` method is a standard JavaScript feature that iterates over an array-like object or an iterable.

**Other alternatives:**

If you were to optimize this benchmark, you could also consider using:

* **`Element.matches()`**: A more modern way to check if an element matches a CSS selector.
* **`Array.prototype.forEach.call()`**: An alternative way to iterate over the result set returned by `getElementsByClassName()`.
* **Caching or memoization**: If the benchmark is run multiple times, caching or memoization could help reduce the overhead of repeated retrievals.

Keep in mind that these alternatives may not provide a significant performance boost unless you're working with very large datasets or performance-critical code.

Related benchmarks:

.getElementsByClassName() vs. .querySelectorAll() (version: 0)

Show the performance impact of a live node list (.getElementsByClassName()) vs. a static node list (.querySelectorAll()).

Comparing performance of: .getElementsByClassName() vs .querySelectorAll()

Created: 3 years ago by: Guest

Jump to the latest result

.getElementsByClassName()

.querySelectorAll()

Suite status: <idle, ready to run>

Experimental features:

Fastest: N/A

Slowest: N/A

Autogenerated LLM Summary (model llama3.2:3b, generated 6 months ago):