Benchmark: Vanilla JS vs jQuery Selectors - v2

Vanilla JS vs jQuery Selectors - v2 (version: 0)

Vanilla JS ID Selector vs Vanilla JS Class Selector vs Vanilla JS Query Selector All vs Vanilla JS Query Selector vs Vanilla JS Data Hook vs jQuery ID Selector vs jQuery Class Selector vs jQuery Data Hook Selector

Comparing performance of: `Vanilla JS ID Selector vs Vanilla JS Class Selector vs Vanilla JS Query Selector All vs Vanilla JS Query Selector vs Vanilla JS Data Hook vs jQuery ID Selector vs jQuery Class Selector vs jQuery Data Hook Selector`

Created: 4 years ago by: Guest

Go to the latest result

HTML Preparation code:

<div id="foo" class="bar" data-hook="test">Hello World</div>
<script src="//ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.slim.min.js"></script>

Tests:

Vanilla JS ID Selector
document.getElementById("foo");
Vanilla JS Class Selector
document.getElementsByClassName("bar");
Vanilla JS Query Selector All
document.querySelectorAll('.bar');
Vanilla JS Query Selector
document.querySelector('.bar');
Vanilla JS Data Hook
document.querySelectorAll('[data-hook="test"]');
jQuery ID Selector
$("#foo");
jQuery Class Selector
$(".bar");
jQuery Data Hook Selector
$('[data-hook="test"]');

Historical Performance Data aggregated from 6 community runs

Desktop Results:

Chrome 6 runs

Vanilla JS ID Selector

17.0M/s

Vanilla JS Class Selector

13.5M/s

Vanilla JS Query Selector

8.3M/s

Vanilla JS Query Selector All

3.4M/s

jQuery ID Selector

3.1M/s

Vanilla JS Data Hook

3.1M/s

jQuery Class Selector

1.0M/s

jQuery Data Hook Selector

892K/s

Fastest: Vanilla JS ID Selector (19.1x faster)

View exact numbers

✓ Vanilla JS ID Selector: 17,042,850 ops/sec
• Vanilla JS Class Selector: 13,516,088 ops/sec
• Vanilla JS Query Selector: 8,264,870 ops/sec
• Vanilla JS Query Selector All: 3,408,958 ops/sec
• jQuery ID Selector: 3,142,628 ops/sec
• Vanilla JS Data Hook: 3,093,896 ops/sec
• jQuery Class Selector: 1,037,575 ops/sec
• jQuery Data Hook Selector: 892,051 ops/sec

Results show median performance across all community submissions. Run this benchmark yourself to verify on your device.

Rendered benchmark preparation results:

Suite status: <idle, ready to run>

Previous results

Test case name	Result
Vanilla JS ID Selector
Vanilla JS Class Selector
Vanilla JS Query Selector All
Vanilla JS Query Selector
Vanilla JS Data Hook
jQuery ID Selector
jQuery Class Selector
jQuery Data Hook Selector

Fastest: N/A

Slowest: N/A

Latest run results:

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

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

Browser/OS: Chrome 138 on Windows

View result in a separate tab

Vanilla JS ID Selector

24.8M/s

Vanilla JS Class Selector

18.1M/s

Vanilla JS Query Selector

9.3M/s

Vanilla JS Query Selector All

3.0M/s

Vanilla JS Data Hook

2.7M/s

jQuery ID Selector

2.5M/s

jQuery Class Selector

746K/s

jQuery Data Hook Selector

661K/s

View exact numbers

Test name	Executions per second
✓ Vanilla JS ID Selector	24,814,182 Ops/sec
Vanilla JS Class Selector	18,145,686 Ops/sec
Vanilla JS Query Selector	9,289,636 Ops/sec
Vanilla JS Query Selector All	3,037,182 Ops/sec
Vanilla JS Data Hook	2,681,956 Ops/sec
jQuery ID Selector	2,461,147 Ops/sec
jQuery Class Selector	746,071 Ops/sec
jQuery Data Hook Selector	661,236 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 benchmark test and its various components.

**Benchmark Definition**

The benchmark is designed to compare the performance of different JavaScript methods for selecting elements in HTML documents. The tests are categorized as follows:

1. Vanilla JS ID Selector
2. Vanilla JS Class Selector
3. Vanilla JS Query Selector All
4. Vanilla JS Query Selector
5. Vanilla JS Data Hook
6. jQuery ID Selector
7. jQuery Class Selector
8. jQuery Data Hook Selector

**Options Compared**

Each test case compares the performance of a specific JavaScript method or library:

* Vanilla JS methods:
	+ `document.getElementById()` (ID selector)
	+ `document.getElementsByClassName()` (class selector)
	+ `document.querySelectorAll()` (query selector all) and `document.querySelector()` (query selector)
	+ `document.querySelector('[data-hook="test"]')` (data hook selector)
* jQuery library:
	+ `$()` (jQuery ID selector), `.()` (jQuery class selector), and `[data-hook="test"]` (jQuery data hook selector)

**Pros and Cons of Each Approach**

Here's a brief overview of the pros and cons of each approach:

1. **Vanilla JS methods**
	* Pros:
		+ Lightweight and performant
		+ No additional library dependencies required
	* Cons:
		+ Can be more verbose for complex queries
		+ May not support advanced features like data hooks out-of-the-box
2. **jQuery library**
	* Pros:
		+ Provides a robust set of selectors with ease of use
		+ Supports advanced features like data hooks and DOM manipulation
	* Cons:
		+ Adds extra library dependencies, which can impact performance
		+ May introduce additional overhead due to its complexity

**Library Usage**

The test cases using jQuery (`$()` and `[data-hook="test"]`) are part of the jQuery library. The purpose of these libraries is to provide a convenient way for developers to manipulate HTML documents, making it easier to select and interact with elements.

* `$(selector)` is the primary function used by jQuery to select elements from the DOM.
* `[data-hook="test"]` is an attribute selector that uses data hooks to select elements based on their presence in the DOM. This feature allows for more flexibility in selecting elements, especially when dealing with dynamically generated content.

**Special JS Features/Syntax**

The test cases do not explicitly mention any special JavaScript features or syntax beyond what's necessary for the benchmark. However, keep in mind that Vanilla JS methods can be optimized using advanced techniques like memoization or caching to improve performance.

**Other Alternatives**

For similar benchmarks, you may want to explore other alternatives:

1. **Vanilla JS vs React Query**: This benchmark would compare the performance of vanilla JavaScript methods with React Query, a popular library for state management and data fetching in React applications.
2. **Vanilla JS vs Angular's Selector Library**: This benchmark would compare the performance of vanilla JavaScript methods with Angular's built-in selector library, providing insights into the performance differences between these two popular frameworks.
3. **jQuery vs Vue.js's DOM Manipulation API**: This benchmark would compare the performance of jQuery and Vue.js's built-in DOM manipulation API, highlighting the trade-offs between lightweight libraries like jQuery and full-fledged framework libraries.

Keep in mind that each benchmark should be tailored to its specific use case and requirements.

Vanilla JS vs jQuery Selectors - v2 (version: 0)

Vanilla JS ID Selector vs Vanilla JS Class Selector vs Vanilla JS Query Selector All vs Vanilla JS Query Selector vs Vanilla JS Data Hook vs jQuery ID Selector vs jQuery Class Selector vs jQuery Data Hook Selector

Comparing performance of: Vanilla JS ID Selector vs Vanilla JS Class Selector vs Vanilla JS Query Selector All vs Vanilla JS Query Selector vs Vanilla JS Data Hook vs jQuery ID Selector vs jQuery Class Selector vs jQuery Data Hook Selector

Created: 4 years ago by: Guest

Go to the latest result

Vanilla JS ID Selector

Vanilla JS Class Selector

Vanilla JS Query Selector All

Vanilla JS Query Selector

Vanilla JS Data Hook

jQuery ID Selector

jQuery Class Selector

jQuery Data Hook Selector

Historical Performance Data aggregated from 6 community runs

Desktop Results:

Chrome 6 runs

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: `Vanilla JS ID Selector vs Vanilla JS Class Selector vs Vanilla JS Query Selector All vs Vanilla JS Query Selector vs Vanilla JS Data Hook vs jQuery ID Selector vs jQuery Class Selector vs jQuery Data Hook Selector`