Native Browser events vs jquery trigger

JavaScript performance comparison

Revision 7 of this test case created by JP Grace

Preparation code

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1/jquery.min.js">
</script>
<script src="https://johnkpaul.github.com/jquery-simulate/jquery.simulate.js">
</script>
      
<script>
Benchmark.prototype.setup = function() {
  window.$el = jQuery("<div id='test'></div>").appendTo(document.body);

};

Benchmark.prototype.teardown = function() {
  window.$el.remove();

};
</script>

Preparation code output

<script src="https://johnkpaul.github.com/jquery-simulate/jquery.simulate.js"> </script>

Test runner

Warning! For accurate results, please disable Firebug before running the tests. (Why?)

Java applet disabled.

Testing in CCBot 2.0.0 / Other 0.0.0
Test Ops/sec
jQuery trigger
// async test
window.$el.one("click", function() {
  setTimeout(function() {
    deferred.resolve();
  }, 10);
});

window.$el.trigger("click");
pending…
native event
// async test
window.$el.one("click", function() {
  setTimeout(function() {
    deferred.resolve();
  }, 10);
})

var el = window.$el.get(0);
var event = document.createEvent("MouseEvents");
event.initMouseEvent("click", true, true, window, 0, 0, 0, 0, 0, false, false, false, false, 0, null);
el.dispatchEvent(event);
pending…
native event through simulate plugin
// async test
window.$el.one("click", function() {
  setTimeout(function() {
    deferred.resolve();
  }, 10);
});

window.$el.simulate("click");
pending…
Pass a constructed MouseEvent to a method directly
new MouseEvent('click');
pending…

Compare results of other browsers

Revisions

You can edit these tests or add even more tests to this page by appending /edit to the URL.

0 Comments