JQuery delegate performance on click event in large lists - slows down if you dynamically add more elements?

Question

I have a visual list of the following items:

http://jsfiddle.net/viatropos/XCe3T/1/

In a real application, I upload only 200 items. But the problem is that the click event takes almost one second to trigger the handler, even with only 200 elements. The mouseover event mouseover is executed immediately, regardless of the number of items in the list.

My question is: shouldn't the delegate method be as fast, regardless of how many elements are on the page? All I do is:

 $("body").delegate("a", "click", function(event) { console.log($(event.target).get(0)); return false; } 

If you go to the jsfiddle example above and the web inspector and click on the link in the result, it will add another 200 elements. Notice how the more elements you add, the slower it gets. It's strange if you start with 6000 elements, the delegate / click is much faster than if you start with 2000 and add 200 at a time until you get to 6000.

What are your thoughts on how to improve jQuery delegate method performance for click event? Can css make this slow down (maybe too many styles or an unoptimized layout)?

Answer 1

Based on my experience, it’s better (in terms of performance) to reinitialize (untie and then bind event handlers again) than using .live or .delegate. Therefore, you must achieve the required performance. In practice, I would define a threshold where the delegate becomes slow, remove all the bindings and return eventHandlers to the existing set of elements.