javascript - Why is my vanilla JS code slower than jQuery equivalent and how to profile it? -

After using heavy jQuery, I learned that some basic operations are very fast in vanilla js (duh!) And so for everything using heavyweight jQuery, pure JS It is better to type in.

But sometimes vanilla js becomes slower and sometimes slower than in equals in jQuery. Right now, I have this scenario that is representative of JQuery against my simple version .on () function. As my code is very simple and is doing "low things", I was hoping that the results remained in favor of Vanilla JS. But by using JSPerf I think my code is 60% slow. Example of code below.

Can anyone explain? But how can someone predominantly show me how to code your profile and the next time you find yourself? So I can see where is the barrier or incompetence? I have tried to use the underlying professors in both chrome and firefox but they did not help me very much, only by showing that my call takes 1 mms and is not really useful, is there a better device or i I am using?

My example scenario is 3 nested divisions, I listen to this event on top DIV with my representative handler, so it also catches events on the nested divis. Then I click on the least DIV incidents and set fire to the event and takes time to handle this incident in JSPR.

  // "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 is the jQuery delegated .on () function var f = {hasClass: function (el, class_name) {return el.className.split ("") .indexOf (class_name) & gt; -1; }, Live: function (L, target, event_type, FN) {if ('class' in target) {var live_handler = function (event) {var target_el = event.target; While (target_el! = L) {if (F.hasClass (target_el, target.class)) back fn.call (target, event); Target_el = target_el.parentNode; } Event.stopPropagation (); }; } Other {var live_handler = fn; } El.addEventListener (event_type, live_handler, true); }}; & Lt; / Script & gt; & Lt; Div id = "test1" & gt; Div id = "test2" class = "target" & gt; Div id = "test2_2" & gt; & Gt; / Div & gt; & Lt; / Div & gt; & Lt; / Div & gt; & Lt; Div id = "jq_test1" & gt; Div id = "jq_test2" class = "target" & gt; & Lt; Div id = "jq_test2_2" & gt; & Lt; / Div & gt; & Lt; / Div & gt; & Lt; / Div & gt; & Lt ;! - Attach event handler - & gt; & Lt; Script & gt; Var test1 = document.getElementById ('test1'); Var jq_test2_2 = document.getElementById ('jq_test2_2'); F.live (test1, {class: 'target'}, 'click', function (event) {}); $ ('# Jq_test1'). ('Click', 'target', function (event) {}); & Lt; / Script & gt;  

.