Benchmark: Get elements by class: jQuery vs querySelectorAll vs getElementsByClassName

Get elements by class: jQuery vs querySelectorAll vs getElementsByClassName (version: 0)

Compare various methods of obtaining a group of elements identified by class name

Comparing performance of: jQuery vs querySelectorAll vs getElementsByClassName vs jQuery: mixed selector vs querySelectorAll: mixed selector vs with Id vs jQuery with Id

Created: 7 years ago by: Guest

Jump to the latest result

HTML Preparation code:

<ul id="theList">
  <li class="odd">Item 1</li>    
  <li class="even">Item 2</li>    
  <li class="odd">Item 3</li>    
  <li class="even">Item 4</li>    
  <li class="odd">Item 5</li>    
  <li class="even">Item 6</li>    
  <li class="odd">Item 7</li>    
  <li class="even">Item 8</li>    
  <li class="odd">Item 9</li>    
  <li class="even">Item 10</li>    
  <li class="odd">Item 11</li>    
  <li class="even">Item 12</li>    
  <li class="odd">Item 13</li>    
  <li class="even">Item 14</li>    
  <li class="odd">Item 15</li>    
  <li class="even">Item 16</li>    
  <li class="odd">Item 17</li>    
  <li class="even">Item 18</li>    
  <li class="odd">Item 19</li>    
  <li class="even">Item 20</li>    
  <li class="odd">Item 21</li>    
  <li class="even">Item 22</li>    
  <li class="odd">Item 23</li>    
  <li class="even">Item 24</li>    
  <li class="odd">Item 25</li>    
  <li class="even">Item 26</li>    
  <li class="odd">Item 27</li>    
  <li class="even">Item 28</li>    
  <li class="odd">Item 29</li>    
  <li class="even">Item 30</li>    
</ul>

Tests:

jQuery
var els = $('.even');
querySelectorAll
var els = document.querySelectorAll('.even');
getElementsByClassName
var els = document.getElementsByClassName('even');
jQuery: mixed selector
var els = $('li.even');
querySelectorAll: mixed selector
var els = document.querySelectorAll('li.even');
with Id
var els = document.getElementById("theList").querySelectorAll('.even');
jQuery with Id
var els = $('#theList .even');

Rendered benchmark preparation results:

Suite status: <idle, ready to run>

Previous results

Test case name	Result
jQuery
querySelectorAll
getElementsByClassName
jQuery: mixed selector
querySelectorAll: mixed selector
with Id
jQuery with Id

Fastest: N/A

Slowest: N/A

Latest run results:

No previous run results

This benchmark does not have any results yet. Be the first one to run it!

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

LLMs can make mistakes. Check important info.

Let's dive into the world of JavaScript microbenchmarks.

**What is being tested?**

MeasureThat.net is testing four different ways to retrieve elements by class name in HTML documents:

1. Using jQuery (`$('.even')`)
2. Using `querySelectorAll` (a native browser API, not part of jQuery)
3. Using `getElementsByClassName`
4. Using jQuery with an ID selector (`$('#theList .even')`)

These methods are tested on different browsers and devices to determine which one is the fastest.

**Options compared**

The four options being compared are:

1. **jQuery**: A popular JavaScript library for DOM manipulation.
2. **querySelectorAll**: A native browser API for querying the document tree.
3. **getElementsByClassName**: Another native browser API for retrieving elements by class name.
4. **jQuery with ID selector**: Using jQuery's `#` selector to target an element and then using `querySelectorAll` on that element.

**Pros and cons of each approach**

Here are some pros and cons of each approach:

1. **jQuery**:
	* Pros: Easy to use, widely supported, and fast.
	* Cons: Adds extra overhead due to its library size, and can lead to slower performance if not optimized correctly.
2. **querySelectorAll**:
	* Pros: Fast, lightweight, and native to browsers.
	* Cons: Requires more effort to write correct selectors, as it's not as intuitive as jQuery's syntax.
3. **getElementsByClassName**:
	* Pros: Simple to use and fast, but only works with `className` attribute.
	* Cons: Limited by the browser's implementation of this API, which may vary across versions and platforms.
4. **jQuery with ID selector**:
	* Pros: Combines the benefits of jQuery's ease of use with the speed of `querySelectorAll`.
	* Cons: Can add unnecessary overhead due to the extra function call.

**Browser-specific observations**

From the benchmark results, we can observe that:

1. `getElementsByClassName` is generally faster than jQuery and `querySelectorAll` (with ID selector) for the `.even` class.
2. `querySelectorAll` with an attribute selector (`[class="even"]`) is faster than jQuery for the `.even` class.
3. The results are consistent across different browsers, which suggests that the performance differences are not due to browser-specific implementations.

In conclusion, the choice of method depends on your specific use case and priorities:

* Use `getElementsByClassName` if you need a lightweight solution with fast performance.
* Use `querySelectorAll` (with attribute selectors) for optimal performance and flexibility.
* Consider using jQuery if you value ease of use and are willing to accept some overhead.

Keep in mind that this benchmark is specific to retrieving elements by class name, and results may vary depending on your specific requirements.

Related benchmarks: