Benchmark: querySelectorAll vs getElementsByClassName v2

HTML Preparation code:

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

Tests:

querySelectorAll
document.querySelectorAll(".test")
getElementsByClassName
document.getElementsByClassName(".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

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

LLMs can make mistakes. Check important info.

**Overview**

The provided benchmark compares the performance of two DOM querying methods in JavaScript: `querySelectorAll` and `getElementsByClassName`. The test is designed to measure which method performs better on specific HTML elements.

**Benchmark Definition JSON**

The benchmark definition is an object that provides information about the test. In this case:

* `"Name"`: The name of the benchmark, which is "querySelectorAll vs getElementsByClassName v2".
* `"Description"`: An empty string, indicating no description for this benchmark.
* `"Script Preparation Code"`: An empty string, meaning no custom JavaScript code needs to be executed before running the test.
* `"Html Preparation Code"`: A simple HTML element `<div class="test"></div>` that will be used as a target for the DOM query operations.

**Individual Test Cases**

There are two individual test cases:

1. `document.querySelectorAll(".test")`: Tests the performance of `querySelectorAll` on elements with the class "test".
2. `document.getElementsByClassName(".test")`: Tests the performance of `getElementsByClassName` on elements with the class "test".

**Library and Purpose**

Neither `querySelectorAll` nor `getElementsByClassName` relies on a specific library. However, these methods are built-in JavaScript functions that work on the Document Object Model (DOM).

* `querySelectorAll()` returns a NodeList containing all elements that match the specified CSS selector.
* `getElementsByClassName()` returns an HTMLCollection of elements that have the specified class name.

**Special JS Feature/Syntax**

Neither of the test cases uses any special JavaScript features or syntax. They rely on standard DOM query methods.

**Options Compared**

The benchmark compares two options:

1. `querySelectorAll()`
2. `getElementsByClassName()`

**Pros and Cons**

Here's a brief overview of each method:

* **querySelectorAll()**:
	+ Pros: More flexible, works with CSS selectors, and is generally faster.
	+ Cons: Can be slower for very large DOM elements due to the complexity of CSS parsing.
* **getElementsByClassName()**:
	+ Pros: Faster for small to medium-sized DOM elements, as it only checks class names.
	+ Cons: Less flexible than `querySelectorAll`, as it requires a specific class name.

In this benchmark, `getElementsByClassName()` appears to perform better on Mobile Safari 12 (iOS 12.0.1), with higher executions per second (1767387.375 vs 2920723.75). However, the performance difference is relatively small, and the actual impact will depend on the specific use case.

**Other Alternatives**

If you're interested in exploring other DOM query methods or alternatives, here are a few examples:

* `querySelector()` and `querySelectorAll()`: These methods work similarly to `getElementsByClassName()`, but with CSS selectors. They provide more flexibility than `getElementsByClassName()` but may be slower for very large elements.
* `DOMParser().parseFromString(htmlString)` and `document.querySelector()`: These methods allow you to parse an HTML string and query its contents using a CSS selector.

Keep in mind that the performance differences between these methods can vary depending on the browser, hardware, and DOM size.

Latest run results:

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

User agent: Mozilla/5.0 (iPhone; CPU iPhone OS 12_0_1 like Mac OS X) AppleWebKit/605.1.15 (KHTML, like Gecko) Mobile/16A404 [FBAN/MessengerForiOS;FBAV/188.0.0.38.99;FBBV/127861730;FBDV/iPhone10,5;FBMD/iPhone;FBSN/iOS;FBSV/12.0.1;FBSS/3;FBCR/T-Mobile.pl;FBID/phone;FBLC/pl_PL;FBOP/5]

Browser/OS: Mobile Safari 12 on iOS 12.0.1

View result in a separate tab

Test name	Executions per second
querySelectorAll	1767387.4 Ops/sec
getElementsByClassName	2920723.8 Ops/sec

Related benchmarks:

querySelectorAll vs getElementsByClassName v2 (version: 0)

Comparing performance of: querySelectorAll vs getElementsByClassName

Created: 5 years ago by: Guest

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 28 days ago):