5

My team is building a mobile website using jQuery Mobile, and as we are nearing the release date performance is becoming more of a concern. One observation I've made is that we have lots of calls to live() and delegate() throughout our code; but in fact, to my knowledge, we are only ever using these methods to attach event handlers to DOM nodes that already exist (and will always exist, in the context of our application).

Given that live() and delegate() are both intended to provide dynamic binding to nodes that may appear later on in the DOM, and considering that each of these involves handling events that have bubbled all the way up to the document root node, I wonder if we would see a performance improvement by changing these calls (where appropriate) to bind() instead.

I'm aware that I could probably test this in some way myself, but I don't have a great deal of experience doing performance testing with JavaScript and I'm thinking it would probably take me longer to figure out than it would for me to simply ask the community. Has anyone tested this? Is there a measurable difference? Or would switching these live() and delegate() calls over to bind() be a waste of time?

Dan Tao
  • 125,917
  • 54
  • 300
  • 447
  • As you know, an event can bubble. live() method doesn't care if the node appeared later on in the DOM or it was there from the beginning, it just attaches a listener do the "document" global variable and listens if some event came from the appropriate object and fires the function if it did. And as for your problem: "We should forget about small efficiencies, say about 97% of the time: premature optimization is the root of all evil". – Mironor Aug 11 '11 at 17:41
  • 1
    @Mironor: Yes, *premature* optimization. – Dan Tao Aug 11 '11 at 17:52

4 Answers4

4

It depends on how you use it but delegate offers the best performance (not necessarily in terms of speed only but overall) in most cases:

http://www.alfajango.com/blog/the-difference-between-jquerys-bind-live-and-delegate/

Mrchief
  • 75,126
  • 20
  • 142
  • 189
  • This addresses the (in my opinion) rather contrived case of something like `$('a').bind(...)` versus `$(document).delegate('a', ...)`; but I'm concerned with the scenario of calling `bind` on a jQuery object containing a *single* DOM node. Perhaps I'll have to test this myself, eh? – Dan Tao Aug 11 '11 at 17:49
  • If its a single element, the performance would be mostly identical between `delegate` and `bind` (`bind` might be slightly faster too). In any case, you should profile your code to be sure. – Mrchief Aug 11 '11 at 17:54
3

I haven't measured anything, but live is likely to be faster than bind for larger numbers of elements, since bind needs to affect every element.

If you bind an event to 200 elements, jQuery needs to loop through all of those elements and call addEventListener on each one.
If you live an event to 200 elements, jQuery just adds a single event handler to the <body>.
However, this means that every event that bubbles up to the body must be tested against each selector that you have lived.

Therefore, the fastest option should be to delegate to the element that contains as little as possible (so that it gets fewer other events that must be tested against your selector)

SLaks
  • 868,454
  • 176
  • 1,908
  • 1,964
  • This reasoning makes sense to me, but I still wonder about the scenario of using `bind` versus `live` or `delegate` with a *single* DOM node. – Dan Tao Aug 11 '11 at 17:51
  • @Dan: If you will only ever have one DOM node, `bind` would probably be faster. – SLaks Aug 11 '11 at 17:55
  • 1
    Another down-side to `.bind()` is that if the elements being affected do not yet have an event handler, jQuery creates a separate and unique function *on each element* in addition to the actual handler that is shared. So if you bind to 200 elements, there are 201 Function instances being created and referenced. – user113716 Aug 11 '11 at 18:31
2

I did a simple benchmark against the three. Generally speaking, Delegate is the most efficient. The exception is when the element being bound to is static and known. Even with multiple static elements, bind consistently outperformed Delegate. Bind does have more initial overhead, but Delegate has more event-time overhead.

See my results at .live() vs .bind()

Community
  • 1
  • 1
Watermark Studios
  • 1,173
  • 1
  • 10
  • 24
  • I'd be very curious to see the code you used to pit these methods against one another. – Dan Tao Oct 13 '11 at 12:34
  • It was a single button with an alert triggered by the event handler for the single static test. Then I just put multiple buttons on the page and bound each one with a listener for the multiple static. Then I had one button create the next button and bind dynamically for the dynamic test. The whole time running a profiler to measure performance and processes. – Watermark Studios Oct 13 '11 at 17:20
0

bind is used to bind he event directly on the element. So the event will be attached only if the element exists where as live and delegate are used for dynamic elements also. It depends on your use but live and delegate provide better performance than bind

ShankarSangoli
  • 69,612
  • 13
  • 93
  • 124