quick tips: efficient events

I’m currently working on removing MooTools from KFM. While doing that, I’m also trying to speed up KFM as much as possible. The reason I’m removing MooTools is that I feel that it is inefficient in some things, and I don’t like how it tries to attach itself to everything in the document – if you retrieve an element with ID ‘test1’ using $('test1'), then inspect the element, you’ll find that MooTools has added itself to the element. This happens a lot. They call it a feature.

I’m replacing it with jQuery. jQuery has a strong community and a database of plugins. I like it. While it is still possible to write inefficient jQuery code, I feel it is a bit more difficult than in MooTools.

change your events code

John Resig’s tutorial recommends adding events to objects using something like this:

$j('#the_element').click(eventToHandleClicks);

While that is very neat, and perfectly fine in most cases, it’s not very efficient when you’re adding it to hundreds of elements on a page when the elements are built up using functions as happens in KFM. (ie; the elements are added ad-hoc, and the events are added at the same time as the element creation)

The method I would recommend is this:

$j.event.add(document.getElementById('the_element'),'click',eventToHandleClicks);

In this case, we avoid the internal stuff that happens in $j() by replacing it with the fast browser function document.getElementById(), and we also jump straight to the addition of the event with the static $j.event.add() instead of $j().click() which is meant to work on an arbitrary number of elements and is therefore slightly slower.

The same applies to generic addEvent() code:

$j('#the_element').addEvent('mouseover',mouseOverEvent);

Again, replace that with:

$j.event.add(document.getElementById('the_element'),'mouseover',mouseOverEvent);

defer creation of events

Let’s say you have a hundred elements to create. Each element has a mouseover, click and mouseout event to be added. That’s 300 operations.

function inLink(){
  window.status='in link';
}
function outLink(){
  window.status='out of link';
}
function clickLink(){
  window.status='link clicked';
}
var i,el;
for(i=0; i<100; ++i){
  el=document.getElementById('link'+i);
  $j.event.add(el,'mouseover',inLink);
  $j.event.add(el,'mouseout',outLink);
  $j.event.add(el,'click',clickLink);
}

This is a very common piece of code. However, it is inefficient, both speed- and memory-wise. If you have 100 links, and are likely to only click one, then why bother adding the mouseout and click events to the rest?

The answer is to add those events upon mouseover and make sure they’re only added once.

function inLink(){
  window.status='in link';
  if(this.eventsAdded)return;
  $j.event.add(this,'mouseout',outLink);
  $j.event.add(this,'click',clickLink);
  this.eventsAdded=true;
}
function outLink(){
  window.status='out of link';
}
function clickLink(){
  window.status='link clicked';
}
var i,el;
for(i=0; i<100; ++i){
  el=document.getElementById('link'+i);
  $j.event.add(el,'mouseover',inLink);
}

2 Comments.

  1. Hi Kae,

    If you have 100 links, wouldn’t it be even more efficient to have them all in a container and add just one click-handler on the container and let the event propagate on its child nodes? Then you could check the target to see which link that was clicked(?).

    Not sure if it works the same with the mouseover/mouseout though…

    Regards,
    Mickster

  2. Mickster, yes. However, not if the elements are added asynchronously, as is in the case I describe above. For example, if KFM is displaying a directory with a thousand files in it, and the one you want to work with is in the first twenty, then you would want to start working with it as soon as it appears, and not to have to wait for the full thousand to complete so its mouseover/(etc) events are added.
    In the ideal case, as you say, all elements would be added synchronously, and events could be added to all at once.

%d bloggers like this: