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

Go to the benchmark

Run details:

User agent: Mozilla/5.0 (Windows NT 10.0; Win64; x64; rv:139.0) Gecko/20100101 Firefox/139.0

Browser: Firefox 139

Operating system: Windows

Device Platform: Desktop

Date tested: one year ago

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

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