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

Test name	Executions per second
Vanilla JS ID Selector	23291572.0 Ops/sec
Vanilla JS Class Selector	17046666.0 Ops/sec
Vanilla JS Query Selector All	2785249.0 Ops/sec
Vanilla JS Query Selector	9801452.0 Ops/sec
Vanilla JS Data Hook	2222050.0 Ops/sec
jQuery ID Selector	3448014.5 Ops/sec
jQuery Class Selector	880452.5 Ops/sec
jQuery Data Hook Selector	684032.6 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"]');