如何優化我的jQuery以獲得最佳性能？

我想知道是否有人可以爲我提供我的代碼的優化版本，因爲我意識到它傾向於在Windows下ie6中運行得非常慢。我覺得我讀的地方，使用.bind（）在我的代碼click事件會有所幫助，但我不知道如何去了解它...如何優化我的jQuery以獲得最佳性能？

下面是相關的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。

感謝您的幫助！

來源

2011-04-13 Krimo

究竟是什麼慢？動畫？ – Olegas 2011-04-13 12:06:11

在IE6下的最佳優化：安裝IE9 ... – Martijn 2011-04-13 12:08:49

無論如何，與現代瀏覽器相比，IE6的速度非常慢。看過你的代碼後，你無法用它做任何事情。 – JohnP 2011-04-13 12:10:13

對我來說這看起來不錯。

我想如果你想在IE6中看起來很快，你可以改變jQuery效果爲動畫GIF，或者你可以完全禁用該效果。國際海事組織對舊版瀏覽器的視覺效果略有下降沒有任何問題。

我願意打賭，大多數IE6用戶由於瀏覽器版本而開始在網絡上出現廣泛的問題。就個人而言，我在開發新網站時不再考慮IE6，但這可能不適合您。 :(

來源

2011-04-13 12:08:01

我完全同意IE6 :)但是，代碼*可以*進一步優化。 – x10 2011-04-13 12:16:46

我確實同意你的看法，但不幸的是，在這一點上我不是一種選擇，因爲好的15％的用戶仍然使用那個該死的IE6 ...... – Krimo 2011-04-13 12:26:17

讓我們最小化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') +''}); 
});

而且，：不是（：動畫）調用有是在IE6緩慢。讓我們把它改變成更簡單的東西吧？

這裏有一個更簡潔的版本：

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);

來源

2011-04-13 12:09:41 x10

IE6下的表現可能有事情做，其處理能力的動畫。但是，您可以對代碼進行一些更改。相反，事件偵聽器連接到每個.buttonGlow，可以從父元素委託它：

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

這可能會導致邊際性能的提高，並且會更容易，如果你需要動態插入節點。

來源

2011-04-13 12:11:42

嗯，該死的。我每天都會學到新東西:) – x10 2011-04-13 12:18:19

我喜歡.delegate（）的優雅，謝謝！ – Krimo 2011-04-13 12:32:28

如何優化我的jQuery以獲得最佳性能？

回答

相關問題