Run results for: jQuery $(selector, context) VS $(context).find(selector) VS Vanilla querySelector

Run details:

User agent: Mozilla/5.0 (Macintosh; Intel Mac OS X 10_15_7) AppleWebKit/605.1.15 (KHTML, like Gecko) Version/17.4.1 Safari/605.1.15

Browser: Safari 17

Operating system: Mac OS X 10.15.7

Device Platform: Desktop

Date tested: 2 years ago

Vanilla querySelector

6.8M/s

$context.find(selector)

1.8M/s

$(selector, $context)

1.7M/s

$(selector).find(selector)

1.1M/s

View exact numbers

Test name	Executions per second
✓ Vanilla querySelector	6,818,134 Ops/sec
$context.find(selector)	1,844,792 Ops/sec
$(selector, $context)	1,664,996 Ops/sec
$(selector).find(selector)	1,147,342 Ops/sec

HTML Preparation code:

<form class="test-form">
    <input class="test-element" />
</form>
<script src='https://cdnjs.cloudflare.com/ajax/libs/jquery/3.7.1/jquery.js'></script>

Script Preparation code:

var $context = $('.test-form');
var context = document.querySelector('.test-form');

Tests:

$(selector, $context)
$('.test-element', $context);
$(selector).find(selector)
$('.test-form').find('.test-element');
$context.find(selector)
$context.find('.test-element');
Vanilla querySelector
context.querySelector('.test-element');