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

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

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

Related benchmarks: