Benchmark: JS selector functions

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>
<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>
<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>
<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>
<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>
<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>
<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>
<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:

getElementsByClassName
document.getElementsByClassName("test")
getElementsByTagName
document.getElementsByTagName("div")
querySelectorAll tagname
document.querySelectorAll("div")
querySelectorAll class
document.querySelectorAll(".test")

Rendered benchmark preparation results:

Suite status: <idle, ready to run>

Previous results

Test case name	Result
getElementsByClassName
getElementsByTagName
querySelectorAll tagname
querySelectorAll class

Fastest: N/A

Slowest: N/A

Latest run results:

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

User agent: Mozilla/5.0 (Windows NT 10.0; Win64; x64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/107.0.0.0 Safari/537.36

Browser/OS: Chrome 107 on Windows

View result in a separate tab

Test name	Executions per second
getElementsByClassName	3325579.2 Ops/sec
getElementsByTagName	3099179.0 Ops/sec
querySelectorAll tagname	505006.2 Ops/sec
querySelectorAll class	480000.0 Ops/sec

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

LLMs can make mistakes. Check important info.

Let's break down the benchmark and explain what's being tested, compared, and their pros and cons.

**Benchmark Definition:**
The benchmark definition is an array of individual test cases, each containing a "Benchmark Definition" property that specifies the JavaScript code to be executed. In this case, we have four test cases:

1. `document.getElementsByClassName("test")`
2. `document.getElementsByTagName("div")`
3. `document.querySelectorAll("div")`
4. `document.querySelectorAll(".test")`

These tests aim to measure the performance of different methods for selecting elements from a DOM.

**What's being tested:**

* **getElementsByClassName**: Tests how fast the browser can execute the `getElementsByClassName` method, which returns a live HTMLCollection of all elements that have the specified class name.
* **getElementsByTagName**: Tests how fast the browser can execute the `getElementsByTagName` method, which returns a live HTMLCollection of all elements with the specified tag name.
* **querySelectorAll tagName**: Tests how fast the browser can execute the `querySelectorAll` method with a tag name selector, which returns a NodeList of all elements that match the given tag name.
* **querySelectorAll class**: Tests how fast the browser can execute the `querySelectorAll` method with a class selector, which returns a NodeList of all elements that have the specified class name.

**Comparison:**

The tests are comparing the performance of these different methods for selecting elements from a DOM. The goal is to determine which method is fastest and most efficient.

**Pros and Cons:**

* **getElementsByClassName**: Pros - allows for more flexible selection, can be used with CSS classes. Cons - slower than `querySelectorAll` due to its live collection nature.
* **getElementsByTagName**: Pros - simple and straightforward, widely supported. Cons - less flexible than `getElementsByClassName`, returns a live collection of all elements matching the tag name.
* **querySelectorAll tagName**: Pros - fast and efficient, allows for more specific selection using tag names. Cons - may not be as flexible as `getElementsByClassName` or `querySelectorAll class`.
* **querySelectorAll class**: Pros - similar to `querySelectorAll tagName`, but allows for class selectors instead of just tag names. Cons - slower than `getElementsByClassName` due to its live collection nature.

**Library and syntax:**

No specific libraries are used in these tests, as they rely on native browser APIs. However, it's worth noting that some browsers may have additional features or optimizations for certain methods (e.g., Chrome has improved performance for `querySelectorAll`) that might be explored in future benchmarks.

**Other alternatives:**

If you wanted to add more test cases or compare different approaches, you could consider:

* Using other DOM selection methods like `querySelector`, `getElementById`, or `getElementsByTagNameById`.
* Adding tests for older browsers or specific browser versions.
* Exploring the use of CSS selectors instead of native DOM APIs.
* Comparing the performance of these methods in a larger DOM structure or with more complex layouts.

Feel free to ask if you'd like me to elaborate on any of these points!

Related benchmarks:

JS selector functions (version: 0)

Comparing performance of: getElementsByClassName vs getElementsByTagName vs querySelectorAll tagname vs querySelectorAll class

Created: 2 years ago by: Guest

Jump to the latest result

getElementsByClassName

getElementsByTagName

querySelectorAll tagname

querySelectorAll class

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):