Run results for: jQuery vs getElementById vs querySelector vs jQuery Find

Run details:

User agent: Mozilla/5.0 (Windows NT 10.0; Win64; x64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/116.0.5845.888 YaBrowser/23.9.2.888 Yowser/2.5 Safari/537.36

Browser: Yandex Browser 23

Operating system: Windows

Device Platform: Desktop

Date tested: 6 months ago

Test name	Executions per second
jQuery	2996946.0 Ops/sec
getElementById	8669229.0 Ops/sec
querySelector	4188880.0 Ops/sec
jQuery Find	1425765.0 Ops/sec

HTML Preparation code:

<script src="http://ajax.aspnetcdn.com/ajax/jQuery/jquery-3.1.0.min.js"></script>
<div id="testElement" class="test class list classes"></div>

Tests:

jQuery
var el = $("#testElement")[0];
getElementById
var el = document.getElementById('testElement');
querySelector
var el = document.querySelector("#testElement");
jQuery Find
var el = $(document).find("#testElement");

Run results for: jQuery vs getElementById vs querySelector vs jQuery Find

Comparing speed of getting element by id with jQuery vs Vanilla JS with getElementById and querySelector

jQuery

getElementById

querySelector

jQuery Find