優化jQuery懸停代碼以更好地執行（更平滑的動畫）

最近我花了一些時間閱讀關於jQuery優化技巧，這無疑幫助提高了我的腳本的性能。但是，我在我的網站上有這個特色新聞部分，它在鼠標懸停的位置上放置了更多信息，而且這部分在除Safari之外的任何瀏覽器中表現都不是很好（當然也可能是Chrome）。）優化jQuery懸停代碼以更好地執行（更平滑的動畫）

我相信這樣做的原因是它在動畫之前對每個mouseover/mouseout事件進行了相當多的DOM遍歷和計算。

我的問題很簡單：有沒有什麼辦法來優化下面的代碼，使動畫運行更順利？

$('#featuredSide .featuredBox,#featuredBottom .featuredBox,#archiveVideos .featuredBox').hover(function(){ 
var boxHeight = parseInt($(this).css('height'))-8; 
var bottomOrSide = $(this).parents("div[id^='featured']").attr("id") 
var captionPos = 76; 
var captionHeight = parseInt($(this).find(".videoCaption").css('height')); 
var animateTo = boxHeight-captionHeight; 

$(".videoCaption", this).stop().animate({top:animateTo + 'px'},{queue:false,duration:160}); 
}, function() { 
$(".videoCaption", this).stop().animate({top:captionPos},{queue:false,duration:100}); 
});

由於我工作的網站尚未公佈我已經uploaded a screenshot of the news section給你的是什麼樣子的想法。

謝謝！

來源

2009-10-07 heintore

另一種解決方案是將memoize全部計算。

不要直接調用懸停，使用「each」，計算，然後應用「懸停」。
因此（我試圖改變儘可能少的代碼）：

$('#featuredSide .featuredBox,#featuredBottom .featuredBox,#archiveVideos .featuredBox').each(function(){ 
    var boxHeight = parseInt($(this).css('height'))-8; 
    var bottomOrSide = $(this).parents("div[id^='featured']").attr("id") 
    var captionPos = 76; 
    var captionHeight = parseInt($(this).find(".videoCaption").css('height')); 
    var animateTo = boxHeight-captionHeight; 

    var params = {top:animateTo + 'px'}; 
    var options = {queue:false,duration:160}; 
    var target = $(".videoCaption", this); 

    $(this).hover(function() { 
    target.stop().animate(params, options); 
    }); 
}

該解決方案將使我以前的答案多少有些毫無意義（他們來說意義不大，但仍然適用）。儘管如此，請記住簡介。

來源

2009-10-07 09:42:30 RichN

這是一個相當優雅的解決方案。我一定會試着看看它在性能方面是否會產生更好的結果。再次感謝！ – heintore 2009-10-07 09:56:10

你做了一些工作多次，這會傷害你。多少還很難說，但試試這個...

var el = $(this); 
var vid = $(".videoCaption", this); 
// use el.blar() instead of $(this) and vid.blar() instead of $(".videoCaption", this).blar()

它也像你的DOM結構必須是所有這種面板使用不同位置的不同，因爲你的代碼似乎有做公平的工作來找到合適的dom使用位。如果可能的話，我會建議在所有不同的位置使DOM結構相同，然後在代碼中使用該結構。

如果這是不可能的，請嘗試爲每個位置編寫此函數的獨特版本 - 這並不理想，但如果它解決了您的性能問題，則可能值得。

來源

2009-10-07 08:57:28

優秀的建議 - 謝謝！相關後續問題：從jQuery開始，我總是想知道在動畫中提供更短或更長的持續時間會對速度和性能產生什麼影響。有沒有對此的答案？將fadeOut（「快」）比fadeOut（「慢」）更快或更慢？ – heintore 2009-10-07 09:15:00

我不這麼認爲。在這兩種情況下，我認爲它會更新元素的不透明度並以瀏覽器允許的速度刷新頁面。更快的瀏覽器只會擠入更多的步驟，導致更平滑的動畫。 – 2009-10-07 12:27:11

對於起動器，它是可以做到Common subexpression elimination，因此，例如，而不是調用

$(this)

多次，存儲該對象在一個變量和使用該變量代替。

var current = $(this);

另一方面，一次性使用變量可以內聯。有些人可能稱之爲過早優化，但由於已經說過代碼速度很慢，所以我認爲現在還不成熟。

bottomOrSide變量似乎並沒有在那裏使用。

至於選擇器，有可能用這個替換整個長東西？

$('.featuredBox')

來源

2009-10-07 09:01:38 RichN

在我微小的小腦袋裏，我想我的選擇器會因爲限制範圍而加快速度，但這可能不適用於這種特殊情況？ – heintore 2009-10-07 09:09:47

我期望一個簡單的'.featuredBox'選擇器在這種情況下執行得更快 - 但是，如果您想知道的話，一如既往_benchmark_！ – 2009-10-07 09:18:11

順便說一句，該特定的選擇器不會減慢懸停動畫的速度;該選擇器似乎只被執行一次。 – 2009-10-07 09:19:57

優化jQuery懸停代碼以更好地執行（更平滑的動畫）

回答

相關問題