MeasureThat.net

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

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

Go to the benchmark
Run details:
Mozilla/5.0 (Macintosh; Intel Mac OS X 10_15_7) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/87.0.4280.88 Safari/537.36 Edg/87.0.664.60
Chrome 87
Mac OS X 10.15.7
Desktop
4 years ago
Test name Executions per second
jQuery 3.3.1 1597499.8 Ops/sec
jQuery 1.8.3 1546565.8 Ops/sec
Vanilla JS querySelector 2314032.0 Ops/sec
Vanilla JS getElementById 4410787.0 Ops/sec
HTML Preparation code:
AخA
 
1
<script src='https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.js'></script>
2
<script type="text/javascript">
3
  var jq331 = $.noConflict(true);
4
</script>
5
<script src='https://cdnjs.cloudflare.com/ajax/libs/jquery/1.8.3/jquery.js'></script>
6
<script type="text/javascript">
7
  var jq214 = $.noConflict(true);
8
</script>
9
<div id="testElement"></div>
Tests:

  • jQuery 3.3.1

     
    var el = jq331("#testElement")[0];
    var className = el.className;

  • jQuery 1.8.3

     
    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;