Benchmark: Vanilla JS vs jQuery Selectors - v2 (jQuery 4 beta 2)

Vanilla JS vs jQuery Selectors - v2 (jQuery 4 beta 2) (version: 1)

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: one year ago by: Guest

Go to the latest result

HTML Preparation code:

<div id="foo" class="bar" data-hook="test">Hello World</div>
<script src="https://cdn.jsdelivr.net/npm/jquery@4.0.0-beta.2/dist/jquery.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"]');

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; rv:139.0) Gecko/20100101 Firefox/139.0

Browser/OS: Firefox 139 on Windows

View result in a separate tab

jQuery ID Selector

6.1M/s

Vanilla JS ID Selector

5.5M/s

Vanilla JS Class Selector

5.4M/s

Vanilla JS Query Selector

3.4M/s

jQuery Class Selector

1.4M/s

Vanilla JS Query Selector All

1.2M/s

Vanilla JS Data Hook

1.1M/s

jQuery Data Hook Selector

647K/s

View exact numbers

Test name	Executions per second
✓ jQuery ID Selector	6,099,065 Ops/sec
Vanilla JS ID Selector	5,549,310 Ops/sec
Vanilla JS Class Selector	5,416,646 Ops/sec
Vanilla JS Query Selector	3,425,620 Ops/sec
jQuery Class Selector	1,416,854 Ops/sec
Vanilla JS Query Selector All	1,180,196 Ops/sec
Vanilla JS Data Hook	1,077,598 Ops/sec
jQuery Data Hook Selector	647,220 Ops/sec