我如何优化我的jQuery以获得最佳性能？

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 !

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. :(

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.