Run results for: jQuery vs Vanilla JS Selectors

Run details:

User agent: Mozilla/5.0 (Macintosh; Intel Mac OS X 10_15_7) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/134.0.0.0 Safari/537.36

Browser: Chrome 134

Operating system: Mac OS X 10.15.7

Device Platform: Desktop

Date tested: one year ago

Benchmark engine: Benchmark.js

Pure JS ID Selector

469K/s

Pure JS Class Selector

442K/s

jQuery ID Selector

417K/s

Pure JS Data Hook

384K/s

jQuery Class Selector

356K/s

jQuery Data Hook Selector

317K/s

View exact numbers

HTML Preparation code:

<script src="//ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.slim.min.js"></script>
<div id="foo" class="bar" data-hook="test">Hello World</div>

Tests:

Pure JS ID Selector
var el = document.getElementById("foo"); console.log(el);
Pure JS Class Selector
var el = document.getElementsByClassName("bar"); console.log(el);
Pure JS Data Hook
var el = document.querySelectorAll('[data-hook~="test"]'); console.log(el);
jQuery ID Selector
console.log($("#foo"));
jQuery Class Selector
console.log($(".bar"));
jQuery Data Hook Selector
console.log($('[data-hook="test"]'));