Benchmark: Get elements by class: jQuery vs querySelectorAll vs getElementsByClassName (jQuery 1.x)

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

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

Comparing performance of: `jQuery 1.12.4 vs querySelectorAll vs getElementsByClassName vs jQuery 1.12.4: mixed selector vs querySelectorAll: mixed selector`

Created: 9 years ago by: Registered User

Go to the latest result

HTML Preparation code:

<script src="https://code.jquery.com/jquery-1.12.4.min.js"></script>

<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 1.12.4
var els = $('.even');
querySelectorAll
var els = document.querySelectorAll('.even');
getElementsByClassName
var els = document.getElementsByClassName('even');
jQuery 1.12.4: 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 1.12.4
querySelectorAll
getElementsByClassName
jQuery 1.12.4: mixed selector
querySelectorAll: mixed selector

Fastest: N/A

Slowest: N/A

Latest run results:

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

User agent: Mozilla/5.0 (Macintosh; Intel Mac OS X 10_15_7) AppleWebKit/605.1.15 (KHTML, like Gecko) Version/15.4 Safari/605.1.15

Browser/OS: Safari 15 on Mac OS X 10.15.7

View result in a separate tab

getElementsByClassName

3.8M/s

querySelectorAll

1.4M/s

querySelectorAll: mixed selector

1.3M/s

jQuery 1.12.4

671K/s

jQuery 1.12.4: mixed selector

452K/s

View exact numbers

Test name	Executions per second
✓ getElementsByClassName	3,848,453 Ops/sec
querySelectorAll	1,373,356 Ops/sec
querySelectorAll: mixed selector	1,330,051 Ops/sec
jQuery 1.12.4	671,377 Ops/sec
jQuery 1.12.4: mixed selector	451,927 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 of what is tested in the provided JSON.

The benchmark compares three ways to get elements by class name using:

1. **jQuery 1.x**: A popular JavaScript library that provides an easy-to-use API for interacting with HTML elements. In this case, it uses the `$('.even')` method to select all elements with a class of 'even'.
2. **querySelectorAll**: A native JavaScript function that returns a NodeList of all elements matching a specified CSS selector.
3. **getElementsByClassName**: A native JavaScript method that returns an array of elements whose class attribute contains the specified value.

**Comparison Options:**

* jQuery 1.x (with and without mixed selectors)
* querySelectorAll
* getElementsByClassName

**Pros and Cons of each approach:**

* **jQuery 1.x (with/without mixed selectors)**:
	+ Pros: Easy to use, fast execution, and reliable results.
	+ Cons: Adds extra overhead due to the jQuery library, may not be suitable for all environments (e.g., older browsers).
* **querySelectorAll**:
	+ Pros: Native JavaScript method, fast execution, and lightweight.
	+ Cons: May have different behavior depending on the browser's CSS engine, can be slower in some cases.
* **getElementsByClassName**:
	+ Pros: Native JavaScript method, fast execution, and lightweight.
	+ Cons: May not work as expected if the element has multiple classes with the same value, can be slower than jQuery.

**Special Considerations:**

The test case "jQuery 1.12.4: mixed selector" uses a mixed CSS selector (`'li.even'`) to select elements. This is done to evaluate the performance of jQuery in handling more complex selectors.

The test also includes a mix of fast and slow browser environments (Safari 15) to ensure the benchmark's results are representative of different scenarios.

**Alternatives:**

If you need an alternative to jQuery, you can consider:

* Lodash (a popular utility library that provides a `filter` function for similar functionality)
* Vanilla JavaScript with the `Array.prototype.filter()` method
* A dedicated class selector library like Select2 or ClassList.js

Keep in mind that each approach has its pros and cons, and the choice ultimately depends on your specific use case and requirements.

Now that we've gone through this explanation, you should have a better understanding of what's being tested in the provided JSON.