Benchmark: jQuery vs getElementById vs querySelector vs jQuery Find

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");

Rendered benchmark preparation results:

Suite status: <idle, ready to run>

Previous results

Test case name	Result
jQuery
getElementById
querySelector
jQuery Find

Fastest: N/A

Slowest: N/A

ⓘ Get performance results from real users on your website with Request Metrics.

Website Performance Monitoring by Request Metrics

Latest run results:

Run details: (Test run date: 6 months ago)

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/OS: Yandex Browser 23 on Windows

View result in a separate tab

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

jQuery vs getElementById vs querySelector vs jQuery Find (version: 0)

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

Comparing performance of: jQuery vs getElementById vs querySelector vs jQuery Find

Created: one year ago by: Guest

Jump to the latest result

jQuery

getElementById

querySelector

jQuery Find

Suite status: <idle, ready to run>

Experimental features:

Fastest: N/A

Slowest: N/A