Benchmark: querySelectorAll vs getElementsByClassName iteration

HTML Preparation code:

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

Tests:

querySelectorAll
const allTests = document.querySelectorAll('.test'); allTests.forEach(function (test) {});
getElementsByClassName
const allTests = document.getElementsByClassName('test'); const arrayAllTests = Array.from(allTests); arrayAllTests.forEach(function (test) {});

Rendered benchmark preparation results:

Suite status: <idle, ready to run>

Previous results

Test case name	Result
querySelectorAll
getElementsByClassName

Fastest: N/A

Slowest: N/A

Latest run results:

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

User agent: Mozilla/5.0 (X11; Linux x86_64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/79.0.3945.136 YaBrowser/20.2.3.320 (beta) Yowser/2.5 Safari/537.36

Browser/OS: Yandex Browser 20 on Linux

View result in a separate tab

Test name	Executions per second
querySelectorAll	380632.4 Ops/sec
getElementsByClassName	273318.1 Ops/sec

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

LLMs can make mistakes. Check important info.

The provided JSON represents two JavaScript microbenchmarks that compare the performance of `querySelectorAll` and `getElementsByClassName`. Let's break down what is being tested, the options compared, their pros and cons, and other considerations.

**What is being tested:**

* Two test cases are being run:
	1. `querySelectorAll`: Measures the time it takes to select all elements with a class of "test" using `document.querySelectorAll('.test')` and iterate over the resulting NodeList.
	2. `getElementsByClassName`: Measures the time it takes to select all elements with a class of "test" using `document.getElementsByClassName('test')`, convert the result to an array, and then iterate over the array.

**Options compared:**

* Two options are being compared:
	1. `querySelectorAll`
	2. `getElementsByClassName`

**Pros and Cons of each approach:**

* `querySelectorAll`:
	+ Pros:
		- More concise syntax
		- Less code to write
		- Can be more efficient if the class is unique across all elements
	+ Cons:
		- May not work correctly if multiple elements have the same class name
		- Can be slower for very large sets of elements due to the way it creates a NodeList
* `getElementsByClassName`:
	+ Pros:
		- Works correctly even if multiple elements have the same class name
		- Can be more efficient for very large sets of elements since it returns an HTMLCollection, which is optimized for iteration
	+ Cons:
		- More verbose syntax
		- Requires conversion to an array using `Array.from()`, which can add overhead

**Other considerations:**

* The test uses a simple HTML structure with multiple elements having the same class name.
* The use of `Array.from()` in the `getElementsByClassName` case adds some overhead, but it's likely negligible compared to the overall performance difference between the two approaches.

**Library and purpose:**

* Neither library is explicitly mentioned in the provided JSON. However, it's worth noting that both `querySelectorAll` and `getElementsByClassName` are methods of the `Document` interface in JavaScript, which provides a way to interact with HTML documents.

**Special JS feature or syntax:**

* There is no special JS feature or syntax being tested in this benchmark. The focus is on comparing the performance of two different DOM selection methods.

**Alternatives:**

* Other DOM selection methods that could be used instead of `querySelectorAll` and `getElementsByClassName` include:
	+ `getElementsByTagName`: Selects elements by their tag name.
	+ `getElementById`: Selects an element by its ID attribute.
	+ `createElement()`/`createTextNode()`: Creates new elements or text nodes for use in the DOM.

Note that these alternatives may have different performance characteristics and use cases compared to `querySelectorAll` and `getElementsByClassName`.

Related benchmarks:

querySelectorAll vs getElementsByClassName iteration (version: 1)

Comparing performance of: querySelectorAll vs getElementsByClassName

Created: 6 years ago by: Registered User

Jump to the latest result

querySelectorAll

getElementsByClassName

Suite status: <idle, ready to run>

Experimental features:

Fastest: N/A

Slowest: N/A

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