Benchmark: Selector Comparisons

HTML Preparation code:

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.8.1/jquery.min.js">
</script>
<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 id="last">
      <a href="#" name="name" class="classname">item 10</a>
    </li>
  </ul>
</div>

Script Preparation code:

var nodes;
function getByClassOrId(selector) {
	if (selector[0] == '.')
      return document.getElementsByClassName(selector);
  	else if (selector[0] == '#')
      return document.getElementById(selector);
  	else
      return null;
}

Tests:

querySelector (id)
nodes = document.querySelector('#last');
querySelectorAll (id)
nodes = document.querySelectorAll('#last');
querySelector (class)
nodes = document.querySelector('.classname');
querySelectorAll (class)
nodes = document.querySelectorAll('.classname');
getElementById
nodes = document.getElementById('last');
getElementsByClassName
nodes = document.getElementsByClassName('classname');
jQuery (id)
nodes = $('#last');
jQuery (class)
nodes = $('.classname');
Custom (id)
nodes = getByClassOrId('#last');
Custom (class)
nodes = getByClassOrId('.classname');

Rendered benchmark preparation results:

Suite status: <idle, ready to run>

Previous results

Test case name	Result
querySelector (id)
querySelectorAll (id)
querySelector (class)
querySelectorAll (class)
getElementById
getElementsByClassName
jQuery (id)
jQuery (class)
Custom (id)
Custom (class)

Fastest: N/A

Slowest: N/A

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

LLMs can make mistakes. Check important info.

**Overview of the Benchmark**

The benchmark measures the performance of different DOM query methods in JavaScript, specifically:

1. `getElementsByClassName`
2. `getElementById`
3. `querySelector` with class and id selectors
4. A custom implementation using the `querySelector` method with a specific selector.

**Performance Comparison**

The benchmark provides execution counts per second for each test case, ordered by performance from highest to lowest. The results indicate that:

* The custom implementation using `querySelector` is the fastest.
* `getElementsByClassName` and `getElementById` are close in terms of performance, but slightly slower than the custom implementation.
* `querySelector` with class and id selectors is the slowest among all four test cases.

**Dom Query Methods Comparison**

Here's a brief summary of each method:

1. **`getElementsByClassName`**: This method returns an HTMLCollection of elements that have the specified class name. It's slower because it has to iterate over the entire DOM tree to find matching elements.
2. **`getElementById`**: This method returns a single element with the specified id attribute. It's faster than `getElementsByClassName`, but still requires iterating over the DOM tree.
3. **`querySelector` with class and id selectors**: This method is slower than the custom implementation because it has to parse the selector string and then search for matching elements in the DOM tree.
4. **Custom Implementation using `querySelector`**: The custom implementation uses a specific selector that takes advantage of the browser's caching mechanism, resulting in faster performance.

**Recommendations**

Based on these results, if you need fast DOM query performance:

* Use the custom implementation using `querySelector`.
* If you can't use the custom implementation, consider using `getElementsByClassName` or `getElementById`, as they are relatively fast.
* Avoid using `querySelector` with class and id selectors unless absolutely necessary, as it's the slowest among all four test cases.

Keep in mind that these results are specific to the browser and platform used for the benchmark. Performance may vary depending on other factors, such as DOM size, complexity, and specific use case requirements.

Latest run results:

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

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

Browser/OS: Chrome 73 on Windows 7

View result in a separate tab

Test name	Executions per second
querySelector (id)	423528.2 Ops/sec
querySelectorAll (id)	199227.4 Ops/sec
querySelector (class)	484108.2 Ops/sec
querySelectorAll (class)	177192.0 Ops/sec
getElementById	627490.2 Ops/sec
getElementsByClassName	726905.5 Ops/sec
jQuery (id)	371737.8 Ops/sec
jQuery (class)	92693.4 Ops/sec
Custom (id)	765958.6 Ops/sec
Custom (class)	761744.6 Ops/sec

Related benchmarks:

Selector Comparisons (version: 4)

Various JS Selector Comparisons

Comparing performance of: querySelector (id) vs querySelectorAll (id) vs querySelector (class) vs querySelectorAll (class) vs getElementById vs getElementsByClassName vs jQuery (id) vs jQuery (class) vs Custom (id) vs Custom (class)

Created: 7 years ago by: Registered User

Jump to the latest result

querySelector (id)

querySelectorAll (id)

querySelector (class)

querySelectorAll (class)

getElementById

getElementsByClassName

jQuery (id)

jQuery (class)

Custom (id)

Custom (class)

Suite status: <idle, ready to run>

Experimental features:

Fastest: N/A

Slowest: N/A

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