Run results for: jQuery 3.3.1 selector vs jQuery 2.1.4 vs document.querySelector vs document.getElementById

Run details:

User agent: Mozilla/5.0 (Macintosh; Intel Mac OS X 10_15_7) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/90.0.4430.93 Safari/537.36.0 Win64.r.20PX50

Browser: Chrome 90

Operating system: Mac OS X 10.15.7

Device Platform: Desktop

Date tested: 3 years ago

Test name	Executions per second
jQuery 3.3.1	1242085.0 Ops/sec
jQuery 2.1.4	1148520.0 Ops/sec
Vanilla JS querySelector	1779540.0 Ops/sec
Vanilla JS getElementById	3787715.0 Ops/sec

HTML Preparation code:

<script src='https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.js'></script>
<script type="text/javascript">
  var jq331 = $.noConflict(true);
</script>
<script src='https://cdnjs.cloudflare.com/ajax/libs/jquery/2.1.4/jquery.js'></script>
<script type="text/javascript">
  var jq214 = $.noConflict(true);
</script>
<div id="testElement"></div>

Tests:

jQuery 3.3.1
var el = jq331("#testElement")[0]; var className = el.className;
jQuery 2.1.4
var el = jq214("#testElement")[0]; var className = el.className;
Vanilla JS querySelector
var el = document.querySelector('#testElement'); var className = el.className;
Vanilla JS getElementById
var el = document.getElementById('testElement'); var className = el.className;

Run results for: jQuery 3.3.1 selector vs jQuery 2.1.4 vs document.querySelector vs document.getElementById

Comparing speed of jQuery 3.3.1 selector, jQuery 2.1.4, vanilla JS querySelector, and vanilla JS getElementById

jQuery 3.3.1

jQuery 2.1.4

Vanilla JS querySelector

Vanilla JS getElementById