CODEWITHSUNDEEP
jqueryevent-handlingjquery-events
brentonstrine
brentonstrine

Reputation: 22752

Should I worry about attaching a lot of unneeded event handlers/listeners?

I have a site with many jQuery event handlers on each page, all in one large .js file.

This means that for any page, the majority of event handlers are for HTML that doesn't exist and won't be used at all.

Will this ding my performance at all?

Edit: As an example, most event handlers will be done something like this:

$(".page").on("click", ".notes .add", function(){ ... });

Because .on() works for new elements, will it always be wasting processing power, or will that only come in to effect when the DOM changes after an ajax call? So to further clarify my question, I guess I should break it down in to two parts.

  1. If there is a performance ding, when will that happen? (Always, on any event, on DOM changes only, on load only).
  2. Is the ding enough to worry about? How do I measure this? If there are a thousand such listeners, will the ding be measured in seconds, milliseconds, microsecond? I get that I can load the page and see how it 'feels' but I'd like to have an idea if I'm building the whole thing wrong before I start!

Upvotes: 2

Views: 260

Answers (2)

Felix Kling
Felix Kling

Reputation: 816840

I think it goes without saying that you should only include the JavaScript that you actually need. Any piece of code you don't need is just wasting processing power but whether it has a performance impact really depends on your markup / other code / etc.

Instead of worrying about performance, I would worry about maintainability. Do you really want to have only one large JavaScript file with all the code for all pages of your site? It will get messy eventually.

Regarding: $(".page").on("click", ".notes .add", function(){ ... });. It really depends. The nice thing with event delegation is that it only binds one event handler to manage multiple elements.

Here, it binds the event handler only to .page. But the handler is examining any click event originating from a descendant of .page to see whether the element matches .notes .add. It should be obvious that if there are no .notes .add elements, this is just unnecessary computation.

But if instead the .page element does not even exist, then the event handler won't even be bound, which is ok. jQuery will try to find .page elements and will fail. Depending on the complexity of the selector, this can really have an impact (a class name is not complex though).

Upvotes: 1

Derek Hunziker
Derek Hunziker

Reputation: 13141

It largely depends on the markup, but in general, it's a good idea to remove unnecessary event handlers if they are not being used.

jQuery events are attached to elements using the Sizzle selection engine. That means a call to $('a').click() still has to traverse the entire DOM searching for links. Since your elements do not exist, no events will be bound, but that doesn't preclude jQuery from having to search for the target elements. One way to reduce the workload on jQuery is to test for the presence of a known element, say, a form tag, before binding the necessary events. 

if ($('form').size() > 0) { 
   // bind events for form here
}

It gets even worse if the events are persisted with .on(), .delegate(), or .live() as these will eat up more resources as they are designed to bind to ALL elements, including ones that have yet to be created.

Upvotes: 5

Related Questions