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

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

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

Fastest: N/A

Slowest: N/A

Latest run results:

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

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

Browser/OS: Chrome 66 on Windows 7

View result in a separate tab

Test name	Executions per second
jQuery	320069.2 Ops/sec
querySelectorAll	61764.3 Ops/sec
getElementsByClassName	2749203.5 Ops/sec
jQuery: mixed selector	47755.9 Ops/sec
querySelectorAll: mixed selector	57745.8 Ops/sec
with Id	545648.7 Ops/sec

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

LLMs can make mistakes. Check important info.

Let's dive into the benchmark and explore what is being tested.

**Benchmark Definition**

The benchmark compares three methods of obtaining a group of elements identified by class name:

1. jQuery
2. querySelectorAll (native JavaScript method)
3. getElementsByClassName (native JavaScript method)

The purpose of this benchmark is to compare the performance of these three methods in different scenarios, such as when an ID is present or not.

**Options Compared**

Here's a breakdown of what each option does:

1. **jQuery**: Uses jQuery's CSS selector syntax (`$('[selector]')`) to select elements. When an ID is present, it uses the `#` symbol followed by the ID.
2. **querySelectorAll (native JavaScript)**: Uses the native `querySelectorAll()` method to select elements. It can accept a CSS selector as a string argument and returns a NodeList of matching elements.
3. **getElementsByClassName (native JavaScript)**: Uses the native `getElementsByClassName()` method to select elements. It takes a class name or space-separated list of class names as an argument.

**Pros and Cons**

Here's a brief overview of each option:

1. **jQuery**: Pros:
	* Easier to read and write, especially for developers familiar with CSS selectors.
	* Can be used in combination with other jQuery methods.
Cons:
	* Requires the jQuery library to be included.
	* May have performance overhead due to the additional library.
2. **querySelectorAll (native JavaScript)**: Pros:
	* Fast and efficient, since it uses native JavaScript functionality.
	* Does not require any libraries or external dependencies.
Cons:
	* Can be more difficult to read and write for developers unfamiliar with CSS selectors.
3. **getElementsByClassName (native JavaScript)**: Pros:
	* Easy to use and understand, as it's a straightforward method name.
Cons:
	* May have performance overhead due to the method's implementation.

**Library Used**

The jQuery library is used in the first two test cases (`jQuery` and `jQuery: mixed selector`). The querySelectorAll native JavaScript method is used in the next three test cases (`querySelectorAll`, `querySelectorAll: mixed selector`, and `with Id`). The getElementsByClassName native JavaScript method is used in the last two test cases (`getElementsByClassName` and `jQuery: mixed selector`).

**Performance Comparison**

The benchmark shows the performance of each option across different browsers and devices. The results indicate that:

* querySelectorAll (native JavaScript) tends to be the fastest method, especially when an ID is present.
* getElementsByClassName (native JavaScript) is slower than querySelectorAll but faster than jQuery.
* jQuery can be a good choice for developers who are familiar with CSS selectors and want a concise way to select elements.

Keep in mind that these results may vary depending on the specific use case, browser versions, and other factors.

Related benchmarks:

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

Created: 6 years ago by: Guest

Jump to the latest result

jQuery

querySelectorAll

getElementsByClassName

jQuery: mixed selector

querySelectorAll: mixed selector

with Id

Suite status: <idle, ready to run>

Experimental features:

Fastest: N/A

Slowest: N/A

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