Chrome event triggering takes ages in large DOM

Question

I have a relatively large DOM and have noticed an incredible performance degradation in chrome when triggering events on an element. A single event e.g:

myElem.trigger('myevent.myscope',arguments);

takes 14ms!! (22.0.1229.92 m)

the same event in firefox 15.0.1 and msie 9 take less than 1ms to trigger!

The element is a jquery object and has been cached so there is no DOM lookup taking place prior to the trigger. I am using console.time()

console.time('trigger');
myElem.trigger('myevent.myscope',arguments);
console.timeEnd('trigger');

Can someone shed a bit of light on this situation

Thanks

Gary

Answer 1

This not not a direct answer to your question.

But in my experience with respect to custom events, I would avoid using trigger / jquery events.

Depending on the jQuery version. Trigger bubbles up the dom tree, this can take quite a long time.

"As of jQuery 1.3, .trigger()ed events bubble up the DOM tree; an event handler can stop the bubbling by returning false from the handler or calling the .stopPropagation() method on the event object passed into the event. " - trigger

My personally solution is to use Peter Higgins Pubsub.

I created a jsperf test showing the difference in performance of jquerys 'on' ( Blue is pubsub, red is jquery, Longer is better [operations per second]); http://jsperf.com/peter-higgins-pubsub-vs-tiny-pubsub

From now on I use pubsub when dealing with custom events, and jquery when it comes to click,mouse over, etc events.

Just my 2cents.