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: 11 months ago

Test name	Executions per second
Vanilla JS ID Selector	5549310.0 Ops/sec
Vanilla JS Class Selector	5416646.5 Ops/sec
Vanilla JS Query Selector All	1180195.9 Ops/sec
Vanilla JS Query Selector	3425620.5 Ops/sec
Vanilla JS Data Hook	1077598.2 Ops/sec
jQuery ID Selector	6099065.0 Ops/sec
jQuery Class Selector	1416853.8 Ops/sec
jQuery Data Hook Selector	647220.2 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"]');