What makes binding slow?

Question

Is it the process of doing the binding, or the having many things bound that's the primarily issue of binding more events than necessary?

The answer's probably both, but to what extent?

Also, I would assume that mouseover events are more expensive than click events, since they have to be checked for more frequently. Right?

score 2 · Accepted Answer · answered Dec 08 '10 at 00:35

2

The binding of events does take time, so if you bind say, a hundred or more events, user interaction with the browser will be 'uneventful' during the time spent binding all of those events.

The more event handlers on the page, the longer the event queue, the slower the UI.

@Juan nicely summarises event delegation in a single sentence in his answer, as an alternative to binding events to many child elements.

answered Dec 08 '10 at 00:35

karim79

339,989
67
413
406

"the longer the event queue" <-- The more bindings, the more processing required to identify the individual one being acted upon? Is that the idea? – Matrym Dec 08 '10 at 00:51
I *think* that is the *general* idea, bearing in mind that different browsers implement event handling different ways. Take a look at: http://stackoverflow.com/questions/282245/what-is-the-event-precedence-in-javascript – karim79 Dec 08 '10 at 01:04

score 1 · Answer 2 · answered Dec 08 '10 at 00:26

As far as I have noticed, the more listeners you add, the slower the UI will be. Event delegation uses less memory; instead of a listener for each child node, you have a single, smarter handler at a parent element. Less memory, less attaching and detaching handlers.

Mouseover events are not necessarily more expensive, it's not extra memory, it's just that your handler is run very often, so you need to make sure it's light code

What makes binding slow?

2 Answers2