Multiple Listeners vs. Multiple Dispatches

JavaScript performance comparison

Test case created by W Alexander

Preparation code

<script>
  var
  listenTo = document
  listenerCount = 100,
      listeners = [],
      listenerFactory = function(fn) {
    return function(event) {
  
     event.target.removeEventListener(
     event.type, arguments.callee, false)
     fn()
    }
      }
      
      
      
      
      function listener(event) {
    this
      }
</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
Individual Handlers
(function() {
 var l = this.listener;
 for (var i = 0; i < listenerCount; i++)
 listenTo.addEventListener("perfTest", listenerFactory(l), false)

 var event = listenTo.createEvent("UIEvents")
 event.initEvent("perfTest", false, false)
 listenTo.dispatchEvent(event)
})()
pending…
Multiple Dispatches
(function() {
 var l = this.listener,
     event = listenTo.createEvent("UIEvents");
 event.initEvent("multiDispatch", false, false)
 listenTo.addEventListener("multiDispatch", callListener, false)
 for (var i = 0; i < listenerCount; i++)
 dispatch(l)

 function dispatch(listener) {
  event.listener = listener
  listenTo.dispatchEvent(event)
 }

 function callListener(event) {
  var listener = event.listener
  listener.call(event.target)
 }
})()
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