Benchmark: querySelectorAll vs. getElementsByClassName

HTML Preparation code:

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

Tests:

querySelectorAll
document.querySelectorAll(".test")
getElementsByClassName
document.getElementsByClassName(".test")

Historical Performance Data aggregated from 8 community runs

Desktop Results:

Firefox 8 runs

getElementsByClassName

8.9M/s

querySelectorAll

2.3M/s

Fastest: getElementsByClassName (3.8x faster)

View exact numbers

✓ getElementsByClassName: 8,879,208 ops/sec
• querySelectorAll: 2,333,196 ops/sec

Results show median performance across all community submissions. Run this benchmark yourself to verify on your device.

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: 9 months ago)

User agent: Mozilla/5.0 (Linux; Android 10; K) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/141.0.0.0 Mobile Safari/537.36

Browser/OS: Chrome Mobile 141 on Android

View result in a separate tab

getElementsByClassName

6.7M/s

querySelectorAll

1.1M/s

View exact numbers

Test name	Executions per second
✓ getElementsByClassName	6,706,273 Ops/sec
querySelectorAll	1,122,110 Ops/sec

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

LLMs can make mistakes. Check important info.

Let's break down the provided benchmark and explain what's being tested, compared, and the pros and cons of each approach.

**Benchmark Overview**

The benchmark compares two DOM querying methods: `document.querySelectorAll()` and `document.getElementsByClassName()`. The test aims to determine which method is faster for a given HTML structure.

**Library and Functionality**

In this benchmark, we have:

1. `document.querySelectorAll()`: This method returns a NodeList of all elements that match the specified CSS selector.
2. `document.getElementsByClassName()`: This method returns an HTMLCollection (a collection of nodes) containing all elements with the specified class name.

Both methods are part of the DOM API and allow developers to dynamically select elements based on their structure in the HTML document.

**Comparison Options**

The benchmark compares two comparison options:

1. **Same method, different parameters**: `document.querySelectorAll()` vs. `document.getElementsByClassName()`. This option tests whether the performance difference between these two similar methods is significant.
2. **Different method**: Using `document.querySelector()` instead of `document.querySelectorAll()` or `getElementsByClassName()`. However, this comparison option is not explicitly mentioned in the provided benchmark definition json.

**Pros and Cons**

1. **Same method, different parameters (querySelectorAll vs. getElementsByClassName)**:
	* Pros: This test provides insight into the performance difference between two commonly used DOM querying methods.
	* Cons: The benchmark may not accurately represent real-world scenarios where developers might use a single method consistently throughout their codebase.
2. **Different method**: Using `document.querySelector()` instead of `querySelectorAll()` or `getElementsByClassName()`. This comparison option is not explicitly mentioned in the provided benchmark definition json.

**Special Considerations**

In this benchmark, no special JavaScript features or syntax are being tested beyond the standard DOM API methods.

**Other Alternatives**

If you want to explore alternative methods for selecting elements, consider using other libraries like jQuery or vanilla JavaScript alternatives like `Array.prototype.filter()` and `String.prototype.indexOf()`. However, these approaches might not be as efficient as native DOM querying methods in most cases.

For example, with jQuery, the equivalent tests would look like this:

```javascript
// Using jQuery's selectors
$(document).find('.test').length;
```

Or, using vanilla JavaScript:

```javascript
// Vanilla JavaScript alternative
const elements = document.querySelectorAll('.test');
elements.length;
```

Keep in mind that these alternatives might have different performance characteristics compared to the native DOM API methods.

Overall, the provided benchmark provides a good starting point for comparing the performance of `document.querySelectorAll()` and `document.getElementsByClassName()`. However, considering additional test cases or exploring other querying methods can help developers better understand their options and make informed decisions about their code.

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

Comparing performance of: `querySelectorAll vs getElementsByClassName`

Created: 7 years ago by: Guest

Go to the latest result

querySelectorAll

getElementsByClassName

Historical Performance Data aggregated from 8 community runs

Desktop Results:

Firefox 8 runs

Suite status: <idle, ready to run>

Fastest: N/A

Slowest: N/A

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

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

Comparing performance of: querySelectorAll vs getElementsByClassName

Created: 7 years ago by: Guest

Go to the latest result

querySelectorAll

getElementsByClassName

Historical Performance Data aggregated from 8 community runs

Desktop Results:

Firefox 8 runs

Suite status: <idle, ready to run>

Fastest: N/A

Slowest: N/A

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

Related benchmarks

Comparing performance of: `querySelectorAll vs getElementsByClassName`