衡量JavaScriptxjQuery性能_Javascript_Jquery

衡量JavaScriptxjQuery性能

javascript jquery

衡量JavaScriptxjQuery性能,javascript,jquery,Javascript,Jquery,我正在测试JS和jQuery之间的速度差异此文件的速度=document.getElementById（'test'）；-0.048ms 此测试的速度=$（'#test'）；-0.333ms 好的。。很明显，纯JS的速度更快。。但是，如果我测试这个： var test = function(selector) { var a = document.getElementById(selector); } test('test'); SPEED: 12.270ms 为什么?？那么jque

我正在测试JS和jQuery之间的速度差异

此文件的速度=

document.getElementById（'test'）；-0.048ms

此测试的速度=

$（'#test'）；-0.333ms

好的。。很明显，纯JS的速度更快。。但是，如果我测试这个：

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

test('test');

SPEED: 12.270ms

为什么?？那么jquery如何能比这更快呢？

jquery不能比原生的getElementById方法更快。你可以亲自到检查

为什么?？因为jQuery必须将自己的对象处理添加到选择器

$（'#…'）

返回的对象列表中

编辑

按照sirrocco的建议，我回答了这个问题。您指出的性能范围不正确。你的时间测量应该有一个bug

我的测试：

<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>

数量级不是你提到的。但是直接调用本机方法和调用调用本机方法的函数之间有区别

为什么?？如前所述，对于jQuery，它必须添加自己的对象处理。对于您的函数测试，有时间创建一个新的函数对象并调用它。

这就是。。。不是她问的你是如何衡量性能的？使用console.time和console.timeEnd@sirrocco，你能粘贴代码吗？添加一个plunkr（html+js）？-我只是在这个stackoverflow窗口上的浏览器中运行了一些测试，这根本不是我看到的

document.getElementById('test');

time = 2ms

$('#test');

time = 680ms

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

time = 33ms