Question

我想知道是否有人可以为我提供我的代码的优化版本，因为我意识到它在Windows下的ie6中运行速度非常慢。我想我在某个地方读过，在我的代码中使用.bind（）代替click事件会有所帮助，但我不知道如何去做...

以下是相关的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 +''});
        });
    });

这是我放在一起的link to the test page。

感谢您的帮助！

Answer 1

这对我来说非常好。

我想如果你想在IE6中让它看起来很快，你可以将jQuery效果改为动画GIF，或者你可以完全禁用该效果。 IMO对旧版浏览器的视觉质量下降效果没有任何问题。

我愿意打赌大多数IE6用户由于他们的浏览器版本而开始在网络上遇到大量问题。就个人而言，我在开发新网站时不再考虑IE6，但这可能不适合您。：（

Answer 2

让我们最小化jQuery调用，首先:) 此外，您为每个发光按钮创建了一个不同的“单击”处理程序。你只能为所有人制作一个 - 像这样：

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') +''});
});

此外，IE中没有（：动画）调用缓慢。让我们把它改成更简单的东西？

这是一个更简洁的版本：

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

IE6下的表现可能与其处理动画的能力有关。但是，您可以对代码进行一些更改。您可以从父元素委派它：

，而不是将事件侦听器附加到每个.buttonGlow

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

这可能会导致边际性能提升，并且如果需要，可以更轻松地动态插入节点。

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

3 个答案: