event-handlers-combined

JavaScript performance comparison

Test case created

Preparation code

<script src="//ajax.googleapis.com/ajax/libs/jquery/1/jquery.min.js"></script>
<div id="elm"></div>
<script>
Benchmark.prototype.setup = function() {
    Benchmark.prototype.setup = function() {
      var $doc = $(document),
        $elm = $('#elm');
    };
   
    Benchmark.prototype.teardown = function() {
      $doc.off('click keydown keyup focus blur mouseover mouseout');
    };
   
    var myPlugin = {
      onClick: function() {
        console.log('click');
      },
      onKeyDown: function() {
        console.log('keydown');
      },
      onCustom: function() {
        console.log('custom');
      }
    }
};
</script>

Preparation code output

Test runner

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

Java applet disabled.

Testing in unknown unknown
Test Ops/sec
Combined w/ function
$doc.on('click keydown custom', '#elm', function() {
  switch (e.type) {
    case 'click ':
      myPlugin.onClick();
      break;
    case 'keydown ':
      myPlugin.onKeyDown();
      break;
    case 'custom ':
      myPlugin.onCustom();
      break;
  };
})

$elm.trigger('click ');
$elm.trigger('keydown ');
$elm.trigger('custom ');
pending…
Combined w/o function
$doc.on('click keydown custom', '#elm ', function() {
  switch (e.type) {
    case 'click ':
      console.log('click ');
      break;
    case 'keydown ':
      console.log('keydown ');
      break;
    case 'custom ':
      console.log('custom ');
      break;
  }
});

$elm.trigger('click ');
$elm.trigger('keydown ');
$elm.trigger('custom ');
pending…

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

Compare results of other browsers

0 comments

Add a comment