Benchmark: querySelectorAll vs. getElementsByClassName with spread

HTML Preparation code:

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

Tests:

querySelectorAll
document.querySelectorAll(".test").forEach(item => console.log(item))
getElementsByClassName
[...document.getElementsByClassName("test")].forEach(item => console.log(item))

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: 2 years ago)

User agent: Mozilla/5.0 (X11; Linux x86_64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/96.0.4664.110 Safari/537.36

Browser/OS: Chrome 96 on Linux

View result in a separate tab

Test name	Executions per second
querySelectorAll	12857.7 Ops/sec
getElementsByClassName	10091.4 Ops/sec

Autogenerated LLM Summary (model gemma2:9b, generated 2 months ago):

LLMs can make mistakes. Check important info.

This benchmark compares two ways to select HTML elements: `querySelectorAll` and `getElementsByClassName`. Both methods aim to retrieve elements with a specific class ("test" in this case).

Let's break down each approach:

**1. `querySelectorAll(".test")`:**

* **Description:** This uses the powerful `querySelectorAll` method, which accepts a CSS selector as its argument. It returns a NodeList (a collection of HTML elements) matching the selector. The benchmark then iterates over this list using `forEach`, logging each element to the console.
* **Pros:** 
    * **Powerful and Flexible:** Supports complex CSS selectors, allowing for more precise element selection.
    * **Live Updates:**  The returned NodeList updates automatically if the DOM changes, making it suitable for situations where elements are added or removed dynamically.

* **Cons:** Can be slower than `getElementsByClassName` for simple class-based selections due to its generality.

**2. `[...document.getElementsByClassName("test")]`:**

* **Description:** This approach utilizes `getElementsByClassName`, which returns a live HTMLCollection of elements with the specified class name. The spread syntax (`...`) is used to convert this collection into an array, allowing for easy iteration with `forEach`.
* **Pros:**
    * **Performance:** Generally faster than `querySelectorAll` when dealing with simple class-based selections because it's optimized specifically for this task.

* **Cons:**  Less flexible; only handles class-based selection and cannot utilize complex CSS selectors like `querySelectorAll`.

**Other Considerations:**

* **Benchmark Context:** The benchmark results depend on the browser, device, and other factors. It's crucial to run benchmarks in various environments to ensure accurate performance comparisons.

* **Alternatives:** There are alternative libraries like jQuery that provide methods for element selection.  However, for basic tasks, native DOM APIs like `querySelectorAll` and `getElementsByClassName` are often sufficient and performant.

In this specific case, the benchmark shows that `querySelectorAll` is slightly faster on average, but the performance difference isn't massive. The choice between the two often boils down to the complexity of your selector needs.

Related benchmarks:

querySelectorAll vs. getElementsByClassName with spread (version: 0)

Comparing performance of: querySelectorAll vs getElementsByClassName

Created: 3 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 gemma2:9b, generated 2 months ago):