How can I optimize my jQuery for maximum performance?

Question

I was wondering whether somebody could provide me with an optimized version of my code, for I realized it tends to run extremely slowly in ie6 under Windows. I think I read somewhere that using .bind() for the click event in my code would help, but I am not sure how to go about it...

Here is the relevant javascript :

 var buttonToGlow = $(".buttonGlow");
 buttonToGlow.effect("pulsate", {}, 850);
 $(".buttonGlow").hover(function(){
 $(this).filter(':not(:animated)').effect("pulsate", {times:1}, 350);
 });
 $(".buttonGlow").each(function(){
 var currentTitle = $(this).attr("title");
 $(this).click(function() {
 TINY.box.show({html:''+ currentTitle +''});
 });
 });

And here is the link to the test page I've put together.

Thanks for any help !

• Olegas: What exactly is slow? An animation?
• Martijn: Best optimization under IE6: install IE9...
• JohnP: IE6 is notoriously slow compared to modern browsers anyway. Having looked at your code, there isn't anything much you could do with it.
• qwertymk: You can change the fps of an animation in jQuery to something other then 77fps which is kinda fast api.jquery.com/jQuery.fx.interval

Answer 1

That looks pretty good to me.

I guess if you want to make it look fast in IE6 you could change the jQuery effect to a animated GIF, or you could disable the effect entirely. IMO there's nothing wrong with a slightly visually degraded effect for older browsers.

I'd be willing to bet that most IE6 users are starting to experience widespread problems on the web due to their browser versions at this point. Personally, I do not take IE6 into consideration anymore when developing new websites, but this may not be an option for you. :(

• x10: I completely agree about IE6 :) Still, the code could be further optimized.
• Krimo: I indeed agree with you, but it is unfortunately not an option for me at this point since a good 15% of our users still use that damned IE6...

Answer 2

Let's minimize jQuery calls, first :)
Also, you are making a different "click" handler for each glowing button. You can make only one for all of them - like this:

var buttonToGlow = $(".buttonGlow");
buttonToGlow.effect("pulsate", {}, 850);
buttonToGlow.hover(function(){
 $(this).filter(':not(:animated)').effect("pulsate", {times:1}, 350);
});
buttonToGlow.click(function() {
 TINY.box.show({html:''+ $(this).attr('title') +''});
});

Also, the :not(:animated) call has to be slow in IE6. Let's change it to something simpler?

Here's a more concise version:

var pulse = function(){
 $(this).stop().effect("pulsate", {times:1}, 350);
};
var display_title = function() {
 TINY.box.show({html: $(this).attr('title')});
};
$(".buttonGlow").effect("pulsate", {}, 850).hover(pulse).click(display_title);

Answer 3

The performance under IE6 probably has something to do with its ability to handle the animation. However, there are some changes you can make to your code. Instead of attaching an event listener to each .buttonGlow, you can delegate it from the parent element:

$('.canvas').delegate('.buttonGlow', 'click', function() {
 TINY.box.show({ html: $(this).attr('title') });
});

This might result in a marginal performance improvement, and will make it easier to dynamically insert nodes if you need to.