Measure javascript X jQuery performance

Question

I'm testing difference speed between JS and jQuery.

Velocity of this = document.getElementById('test'); - 0.048ms document.getElementById('test'); - 0.048ms

Velocity of this = $('#test'); - 0.333ms $('#test'); - 0.333ms

Ok.. pretty obvious why pure JS is faster.. but, if i test this:

var test = function(selector) {
  var a = document.getElementById(selector);
}

test('test');

SPEED: 12.270ms

Why? And how jquery can be faster them this?

Answer 1

JQuery can't be faster than the native getElementById method. You can check it by yourself at jsperf .

Why? Because jQuery have to add its own object handling to the object list returned by the selector $('#...') .

EDIT

As suggested by sirrocco, I answer the question. The range of performances you indicate are not correct. You should have a bug in your time measurements.

My test:

<html>
<head>
  <meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
  <script src="jquery.js"></script>

  <script>
    document.addEventListener("DOMContentLoaded", function(event) {
      var start, end, i, time;
      start = new Date().getTime();
      for (i = 0; i < 500000; ++i) {
        document.getElementById('test');
      }
      end = new Date().getTime();
      time = end-start;
      document.getElementById('res1').innerHTML = 'time = '+time+'ms';

      start = new Date().getTime();
      for (i = 0; i < 500000; ++i) {
        $('#test');
      }
      end = new Date().getTime();      
      time = end-start;
      document.getElementById('res2').innerHTML = 'time = '+time+'ms';

      start = new Date().getTime();
      for (i = 0; i < 500000; ++i) {
        var test = function(selector) { var a = document.getElementById(selector); };
        test('test');
      }
      end = new Date().getTime();
      time = end-start;
      document.getElementById('res3').innerHTML = 'time = '+time+'ms';
    });
  </script>
</head>
<body>
  <pre>document.getElementById('test');</pre>  <span id="res1">result</span></br>
  </br>
  <pre>$('#test');</pre>  <span id="res2">result</span></br>
  </br>
  <pre>  var test = function(selector) {
    var a = document.getElementById(selector);
  }
  test('test');</pre>  <span id="res3">result</span></br>
 <span id="test">The element to find</span>
</body>
</html>

This is not the most beautiful code in the world but adding functions modify the way the browser optimize the loops. The results on a corei7+FF31 are :

document.getElementById('test');

time = 2ms

$('#test');

time = 680ms

var test = function(selector) {
  var a = document.getElementById(selector);
}
  test('test');

time = 33ms

The order of magnitude are not the ones you mentioned. But there is a difference between calling directly the native method and calling a function calling the native method.

Why? As I said previously, for jQuery it have to add its own object handling. And for your test with a function there is the time to create a new function object and to call it.

Measure javascript X jQuery performance

Question

1 answers

solution1
2 2015-06-05 07:05:50

Measure javascript X jQuery performance

Question

1 answers

solution1 2 2015-06-05 07:05:50

solution1
2 2015-06-05 07:05:50