MeasureThat.net

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

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

Go to the benchmark
Run details:
Mozilla/5.0 (Macintosh; Intel Mac OS X 10_15_6) AppleWebKit/605.1.15 (KHTML, like Gecko) Version/14.0.2 Safari/605.1.15
Safari 14
Mac OS X 10.15.6
Desktop
4 years ago
Test name Executions per second
jQuery 3.3.1 1754598.6 Ops/sec
jQuery 2.1.4 1824166.6 Ops/sec
Vanilla JS querySelector 3200324.2 Ops/sec
Vanilla JS getElementById 4517563.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/2.1.4/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");
    var className = el.length;

  • jQuery 2.1.4

     
    var el = jq214("#testElement");
    var className = el.length;

  • Vanilla JS querySelector

     
    var el = document.querySelector('#testElement');
    var className = el.id;

  • Vanilla JS getElementById

     
    var el = document.getElementById('testElement');
    var className = el.id;