62

I have a general question about javascript (jQuery) events/listeners. Is there any limit for the number of click listener without getting performance problems?

7
  • Needs more content really. a click handler wont give you perf issues, it's that actions taken on click that 'can' cause issues. also, one click could be bound to 1 element, or 20,000 elements, so more info is needed.
    – atmd
    Feb 20, 2015 at 11:22
  • If i put on several elemts a click listener with jquery. That is what I mean. The whole app has to listen to it. I'm talking of 5-20 click listener. I do not know if this is a problem, that is why I am asking :) Feb 20, 2015 at 11:24
  • 1
    Here is a jsperf test on click events bound to one or many elements, you'll see that even though only one event is bound, the number of elements that match that selection has a greater impact. so that will effect perf much more then number of events. The test (just updated) also shows how you'd bind to a parent, to improve the perf of binding to many elements. (works out the fastest here as it's an id
    – atmd
    Feb 20, 2015 at 11:24
  • I'm checking if i understood you. So if I put 10 listener on 10 different elements is less a perf problem than put one listener on 10 elements with the same class? Feb 20, 2015 at 11:35
  • 1
    It's more about the number of elements and how they are selected rather then adding the event it's self. i.e. this perf test shows that adding 3 separate events to an element with an id is about as fast as adding one event using a class, so adding the event doesn't really impact perf, its how you get the elements (and how many elements) that has an effect
    – atmd
    Feb 20, 2015 at 11:49

2 Answers 2

47

In terms of performance, the number of elements the event is bound to is where you'd see any issues.

Here is a jsperf test. You'll see that binding to many elements is much slower, even though only one event is being bound in each case.

The 3rd test in the jsperf shows how you'd bind the event to a parent element and use delegation to listen for the elements you want. (In this case .many)

n.b. The test shows that the 3rd option is the fastest, but that's because it's targeting the element with an id and not a class.

Update: Here's another perf test showing 3 events bound to an id vs one event bound using a class

10
  • 3
    Thank you for your answer @atmd - The jsperf test demonstrated the problem excellently Feb 20, 2015 at 11:40
  • I +1'd this answer as well. In general, if you're using jQuery, attempt to favor the delegated extra argument when using $(element).on()... so in stead of $('ul li').on('click', callback)` Use $('ul').on('click', 'li', callback).
    – ded
    Jul 16, 2015 at 8:03
  • 3
    I think your measurements are tangential to the actual question (as I read it.) Instead of measuring the performance of an application with fewer / more bindings, you are measuring the cost of setting up the bindings in the first place. Nov 23, 2015 at 21:07
  • 18
    jsperf is downs since a year, would be nice to update the answer with still existing performance tests to illustrate the answer
    – Flion
    Sep 9, 2016 at 10:35
  • 4
    jsperf works fine here. No need to update the answer.
    – Tom
    Aug 9, 2017 at 19:12
23

Though this is an old question, I do not feel that it's completely answered yet.

As atmd pointed out: It's already important where you're adding the event handlers to. But the original question seems to be more concerned about the performance impact of triggering those event handlers (e.g. click or scroll events).

And yes, adding additional event handlers to an element DOES decrease performance. Here is a performance comparison to test the following cases:

https://jsbench.me/ztknuth40j/1

The results

  1. One <div> has 10 click handlers, and the click event is triggered by jQuery.
    → 72.000 clicks/sec
  2. One <div> has 100 click handlers, and the click event is triggered by jQuery.
    → 59.000 clicks/sec ~ 19% slower than first case
    This shows, that additional event handlers can slow down the execution
  3. One <div> has 10 click handlers, and the click event is triggered by plain JS.
    → 84.000 clicks/sec ~ 6% faster than the first case
    Using plain JS is a little bit faster than using jQuery
  4. One <div> has 100 click handlers, and the click event is triggered by plain JS.
    → 14.000 clicks/sec ~ 77% slower than second case
    This is interesting: When using native events, the number of listeners seems to degrade the performance faster than using jQuery.

(Those results vary on every run and depend largely on your hardware and browser)

Keep in mind that those tests are done with an empty function. When adding a real function that performs some additional tasks, the performance will slow down even further.

Here is a second test that changes the contents of a div on each click:

https://jsbench.me/ztknuth40j/2

Is it slow?

On the other hand: Even 100 operations per second are super fast (it means, that every event handler is executed 100 times in a single second) and no user will notice the delay.

I think you will not run into problems with user-action events like click or mouseenter handlers, but need to watch out when using events that fire rapidly, like scroll or mouseover.

Also, as computers get faster and browsers apply more and more optimizations, there is no hard limit for how many event handlers are "too much". It not only depends on the function that's called and the event that's observed but also on the device and browser of the user.

0

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge that you have read and understand our privacy policy and code of conduct.

Not the answer you're looking for? Browse other questions tagged or ask your own question.