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

在大量使用jQuery之后，我发现一些基本操作在vanillaJSDuh中要快得多！因此，最好使用纯JS编写，而不是对所有内容都使用重量级jQuery

但有时vanilla JS比jQuery中的等价物慢，有时慢很多。现在，我有一个场景。JQuery的delegate.on函数针对我的简单版本。由于我的代码更简单，做的事情更少，所以我希望结果会有利于vanilla JS。但是使用JSPerf，我发现我的代码要慢60%以上。下面的代码示例

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

我的示例场景是3个嵌套的div。我在顶部DIV中侦听事件，并附加委托处理程序，以便它也捕获嵌套DIV中的事件。然后我在最低的DIV上触发click事件，并在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>

---

.

className.split不太好-适用于支持它的浏览器的MatcheSelector。Plus不仅仅适用于类选择器。此外，您应该检查，看看它在做什么。@RGraham实际上，我用indexOf+split与jQuery的hasClass进行比较，我的实现比jQuery提前了33%，请参见此处：。所以我想这不会是瓶颈。但在这个问题上，我真的在寻找一种方法来分析javascript代码，所以我不必猜测，但要确定问题出在哪里。@RGraham我肯定已经检查了jQuery和Zepto.js的源代码，它们使用了更复杂的方法，我正在寻找一种非常简单的js解决方案，我可以分析和调整它以更快。