Benchmark: querySelector vs. getElementsByClassName[0]

HTML Preparation code:

<div>
  <ul>
    <li>
      <a href="#" name="name" class="classname">item 1</a>
    </li>
    <li>
      <a href="#" name="name" class="classname">item 2</a>
    </li>
    <li>
      <a href="#" name="name" class="classname">item 3</a>
    </li>
    <li>
      <a href="#" name="name" class="classname">item 4</a>
    </li>
    <li>
      <a href="#" name="name" class="classname">item 5</a>
    </li>
    <li>
      <a href="#" name="name" class="classname">item 6</a>
    </li>
    <li>
      <a href="#" name="name" class="classname">item 7</a>
    </li>
    <li>
      <a href="#" name="name" class="classname">item 8</a>
    </li>
    <li>
      <a href="#" name="name" class="classname">item 9</a>
    </li>
    <li>
      <a href="#" name="name" class="classname">item 10</a>
    </li>
  </ul>
</div>

Tests:

querySelector
document.querySelector('.classname')
getElementsByClassName
document.getElementsByClassName('classname')[0]

Rendered benchmark preparation results:

Suite status: <idle, ready to run>

Previous results

Test case name	Result
querySelector
getElementsByClassName

Fastest: N/A

Slowest: N/A

Latest run results:

Run details: (Test run date: one year ago)

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

Browser/OS: Chrome 129 on Windows

View result in a separate tab

Test name	Executions per second
querySelector	2826363.5 Ops/sec
getElementsByClassName	2994428.2 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 is tested, compared, and other considerations.

**Benchmarked Code**

The benchmark tests two methods to select an element with a specific class:

1. `document.querySelector('.classname')`
2. `document.getElementsByClassName('classname')[0]`

Both methods are used to retrieve the first element in the DOM that matches the specified class.

**Library and Purpose**

None of the benchmarked code uses any external libraries.

**Special JS Features or Syntax**

The benchmark does not use any special JavaScript features or syntax, such as async/await, Promises, or modern web APIs like `fetch` or `URL`.

**Approaches Compared**

Two approaches are compared:

1. **`document.querySelector('.classname')`**: This method is a more modern and concise way to select elements in HTML documents.
2. **`document.getElementsByClassName('classname')[0]`**: This method is an older approach that was widely used before the introduction of `querySelector`.

**Pros and Cons**

Here are some pros and cons of each approach:

1. **`document.querySelector('.classname')`**:
	* Pros: More concise, efficient, and widely supported across modern browsers.
	* Cons: May not work as expected in older browsers that don't support the `querySelector` API.
2. **`document.getElementsByClassName('classname')[0]`**:
	* Pros: Works in all browsers that support JavaScript, but can be less readable and maintainable due to its verbosity.
	* Cons: Less efficient and more prone to errors than `querySelector`.

**Benchmark Preparation Code**

The preparation code provided creates a simple HTML document with an unordered list containing 10 list items, each with an anchor tag having the class "classname".

```html
<div>
    <ul>
        <li><a href="#" name="name" class="classname">item 1</a></li>
        ...
```

The preparation code does not include any JavaScript code that would interfere with the benchmark.

**Latest Benchmark Result**

The latest result shows:

* Chrome 80 on Windows 7, with an average of approximately 2209576.5 executions per second for `getElementsByClassName` and 2097408.75 executions per second for `querySelector`.
* The results are close, indicating that both methods have similar performance characteristics.

**Other Alternatives**

If the benchmark wanted to include other alternatives, they might consider testing:

1. **`document.querySelectorAll('.classname')`**: This method returns all elements matching the class, rather than just the first one.
2. **`document.querySelector('.classname') && document.querySelector('.other-classname')`**: This approach uses a simple AND operator to select two classes in a single query.

However, these alternatives might not be as commonly used or relevant to the specific use case being benchmarked.

Related benchmarks:

querySelector vs. getElementsByClassName[0] (version: 0)

Comparing performance of: querySelector vs getElementsByClassName

Created: 6 years ago by: Guest

Jump to the latest result

querySelector

getElementsByClassName

Suite status: <idle, ready to run>

Fastest: N/A

Slowest: N/A

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