Question

使用了大量的jQuery之后，我发现，一些基本操作在vanilla JS中更快（呃！），因此在纯JS中编写比在所有内容中使用重量级jQuery更好。

但是有时候vanilla JS比jQuery中的同等速度慢，有时慢一些。现在，我有这个场景。 JQuery的委托.on（）函数对我的简单版本。因为我的代码更简单，并且正在做更少的事情＆＃34;我期待结果有利于香草JS。但是使用JSPerf，我发现我的代码速度慢了60％。下面的代码示例。

有人可以解释原因吗？但主要是有人能告诉我如何描述我的代码并下次自己找到答案的实用方法吗？所以我可以看到瓶颈或效率低下的地方？我曾尝试在Chrome和Firefox中使用内置的分析器，但它们对我的帮助不大，只是表明我的函数调用需要1ms的时间而且没什么用处。是否有更好的工具或我使用它们错了？

我的示例场景是3个嵌套的DIV。我在顶级DIV上监听事件，并附加了我的委托处理程序，因此它也会在嵌套的DIV上捕获事件。然后我在最低的DIV上点击事件，在JSPerf中我测量处理事件所花费的时间。

// just a simple function for firing "click" event
function clickit(node) {
  var event = document.createEvent("MouseEvents");
  event.initEvent('click', false, true);
  event.synthetic = true;
  node.dispatchEvent(event, true);
}

// my very simple implementation of jQuery's delegated .on() function
var F = {
  hasClass:function(el, class_name) {
    return el.className.split(" ").indexOf(class_name) > -1;
  },
  live:function(el, target, event_type, fn){
    if ('class' in target) {
      var live_handler = function(event){
        var target_el = event.target;
        while (target_el != el) {
          if (F.hasClass(target_el, target.class)) return fn.call(target, event);
          target_el = target_el.parentNode;
        }
        event.stopPropagation();
      };
    } else {
      var live_handler = fn;
    }
    el.addEventListener(event_type, live_handler, true);
  }
};
</script>

<div id="test1"><div id="test2" class="target"><div id="test2_2"></div></div></div>
<div id="jq_test1"><div id="jq_test2" class="target"><div id="jq_test2_2"></div></div></div>

<!-- attaching event handlers -->
<script>
var test1 = document.getElementById('test1');
var jq_test2_2 = document.getElementById('jq_test2_2');
F.live(test1, {class:'target'}, 'click', function(event){});
$('#jq_test1').on('click', '.target', function(event){});
</script>

JSPerf for this is available for testing here

为什么我的vanilla JS代码比jQuery等效的慢，以及如何分析它？

0 个答案: