Run results for: Vanilla JS vs jQuery Selectors - v2 (jQuery 4 beta 2)

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

Run details:

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: Chrome 138

Operating system: Windows

Device Platform: Desktop

Date tested: one year ago

Vanilla JS ID Selector

23.3M/s

Vanilla JS Class Selector

17.0M/s

Vanilla JS Query Selector

9.8M/s

jQuery ID Selector

3.4M/s

Vanilla JS Query Selector All

2.8M/s

Vanilla JS Data Hook

2.2M/s

jQuery Class Selector

880K/s

jQuery Data Hook Selector

684K/s

View exact numbers

Test name	Executions per second
✓ Vanilla JS ID Selector	23,291,572 Ops/sec
Vanilla JS Class Selector	17,046,666 Ops/sec
Vanilla JS Query Selector	9,801,452 Ops/sec
jQuery ID Selector	3,448,014 Ops/sec
Vanilla JS Query Selector All	2,785,249 Ops/sec
Vanilla JS Data Hook	2,222,050 Ops/sec
jQuery Class Selector	880,452 Ops/sec
jQuery Data Hook Selector	684,033 Ops/sec

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