Benchmark: Get elements by class: jQuery vs querySelectorAll

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>

<script src='https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.js'></script>

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');

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

Fastest: N/A

Slowest: N/A

Latest run results:

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

User agent: Mozilla/5.0 (X11; Ubuntu; Linux x86_64; rv:129.0) Gecko/20100101 Firefox/129.0

Browser/OS: Firefox 129 on Ubuntu

View result in a separate tab

getElementsByClassName

10.5M/s

jQuery

1.5M/s

querySelectorAll

1.1M/s

querySelectorAll mixed selector

879K/s

jQuery mixed selector

583K/s

View exact numbers

Test name	Executions per second
✓ getElementsByClassName	10,538,581 Ops/sec
jQuery	1,491,148 Ops/sec
querySelectorAll	1,136,062 Ops/sec
querySelectorAll mixed selector	879,237 Ops/sec
jQuery mixed selector	582,693 Ops/sec

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

LLMs can make mistakes. Check important info.

Let's dive into the explanation.

The provided JSON represents a benchmark test case on MeasureThat.net, which compares the performance of different methods to get elements by class name in JavaScript. The test cases include:

1. **jQuery**: Uses the jQuery library to select elements with the class "even".
2. **querySelectorAll**: Uses the native `querySelectorAll` method to select elements with the class "even" or a specific CSS selector (`li.even`).
3. **getElementsByClassName**: Uses the native `getElementsByClassName` method to select elements with the class "even".
4. **jQuery mixed selector**: Uses jQuery's selector syntax to combine the selection of elements with the class "even" and an additional element type (in this case, `li`).

Now, let's break down each approach:

**1. jQuery**

* Pros: jQuery provides a convenient way to select elements using a CSS-like syntax. It also offers methods like `.filter()` and `.each()` for further manipulation.
* Cons: jQuery adds extra overhead due to its library size and the need to include multiple files (e.g., jQuery core, jQuery UI). This can slow down page loads and affect overall performance.

**2. querySelectorAll**

* Pros: `querySelectorAll` is a native method that only requires a single file (the JavaScript API) and no additional libraries. It's also more efficient than jQuery due to its lightweight nature.
* Cons: The syntax for using `querySelectorAll` can be less intuitive, especially when working with complex selectors.

**3. getElementsByClassName**

* Pros: `getElementsByClassName` is another native method that's efficient and doesn't require any libraries. It returns a NodeList, which can be easier to work with than jQuery's `$()` wrapper.
* Cons: The syntax for using `getElementsByClassName` can also be less intuitive, especially when working with complex class names.

**4. jQuery mixed selector**

* Pros: Combining the benefits of both jQuery and CSS selectors provides a flexible way to select elements. However, this approach may still incur overhead due to the additional processing required by jQuery.
* Cons: As mentioned earlier, using jQuery adds extra overhead, which can impact performance.

Other alternatives that could be considered for similar use cases include:

* **Element.prototype.matches** (introduced in ECMAScript 2017): This method provides a more modern and efficient way to select elements using CSS selectors.
* **Modern CSS selectors**: The latest version of the CSS specification introduces new selector syntax, such as `:is()` and `> *` .

In conclusion, the choice of approach depends on the specific requirements of your project. If you prioritize ease of use and convenience, jQuery might be a good choice. However, if you're looking for optimal performance and are willing to invest time in learning more about native methods, `querySelectorAll` or `getElementsByClassName` could be better options.

As for the latest benchmark results, it's clear that `getElementsByClassName` performed best on Firefox 129, followed closely by `querySelectorAll`. The jQuery test cases were slower due to the overhead of the library.

Get elements by class: jQuery vs querySelectorAll (version: 0) Benchmark.js

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`

Created: 6 years ago by: Registered User

Go to the latest result

jQuery

querySelectorAll

getElementsByClassName

jQuery mixed selector

querySelectorAll mixed selector

Suite status: <idle, ready to run>

Fastest: N/A

Slowest: N/A

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

Get elements by class: jQuery vs querySelectorAll (version: 0) Benchmark.js

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

Created: 6 years ago by: Registered User

Go to the latest result

jQuery

querySelectorAll

getElementsByClassName

jQuery mixed selector

querySelectorAll mixed selector

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: `jQuery vs querySelectorAll vs getElementsByClassName vs jQuery mixed selector vs querySelectorAll mixed selector`