爲單頁網站優化jquery動畫

Question

我最近的任務是創建一個HTML驅動的網頁，將模擬基本的Flash轉換和動畫，這使我轉向jQuery，自然。該網站有四個不同的頁面，每個頁面都有其特定的背景和一小段文字。

簡單嗎？顯然不適合我。當我將交互式模擬運行到批准狀態時，我遇到了動作緩慢的問題，僅針對顯示器超過18英寸的（驚喜，驚喜）Mac電腦。我運行測試的電腦在所有主流瀏覽器上都能很好地工作 - Chrome， IE9和FF。對於18英寸以上的Mac，然而，FF的效果最好，其餘的則非常糟糕。

我已經嘗試過手段和方法來優化jQuery代碼，甚至使用index.html頁面將所有圖像預加載到瀏覽器緩存中，然後將用戶重定向到實際網頁，所有這些都希望在那裏可能對處理時間的壓力較小。

不幸的是，沒有任何工作。

這是一個單頁面設置，這樣很可能只有助於低迷的主要因素之一，但它沒有解釋爲什麼它適用於個人電腦和18" 歲以下的Mac電腦的罰款。

在任何情況下，這裏是我的動畫代碼片段在負載元素和頁/部分之間的過境褪色：

$(document).ready(function(){ 

$("#home-button").click(function(){ 
    $("#home").fadeTo(2000, 1); 
    $("#location").fadeTo(2000, 0); 
    $("#services").fadeTo(2000, 0); 
    $("#contact").fadeTo(2000, 0); 
    $("#bg-img-1").fadeTo(2000, 0); 
    $("#bg-img-2").fadeTo(2000, 0); 
    $("#bg-img-3").fadeTo(2000, 0); 
    $("#bg-img-4").fadeTo(2000, 1);}); 

$("#location-button").click(function(){ 
    $("#home").fadeTo(2000, 0); 
    $("#location").fadeTo(2000, 1); 
    $("#services").fadeTo(2000, 0); 
    $("#contact").fadeTo(2000, 0); 
    $("#bg-img-1").fadeTo(2000, 0); 
    $("#bg-img-2").fadeTo(2000, 1); 
    $("#bg-img-3").fadeTo(2000, 0); 
    $("#bg-img-4").fadeTo(2000, 0);}); 

$("#services-button").click(function(){ 
    $("#home").fadeTo(2000, 0); 
    $("#location").fadeTo(2000, 0); 
    $("#services").fadeTo(2000, 1); 
    $("#contact").fadeTo(2000, 0); 
    $("#bg-img-1").fadeTo(2000, 0); 
    $("#bg-img-2").fadeTo(2000, 0); 
    $("#bg-img-3").fadeTo(2000, 1); 
    $("#bg-img-4").fadeTo(2000, 0);}); 

$("#contact-button").click(function(){ 
    $("#home").fadeTo(2000, 0); 
    $("#location").fadeTo(2000, 0); 
    $("#services").fadeTo(2000, 0); 
    $("#contact").fadeTo(2000, 1); 
    $("#bg-img-1").fadeTo(2000, 1); 
    $("#bg-img-2").fadeTo(2000, 0); 
    $("#bg-img-3").fadeTo(2000, 0); 
    $("#bg-img-4").fadeTo(2000, 0);});}); 

這裏是我的背景圖片的CSS樣式，並且具有調整大小和作物某些圖形元素根據瀏覽器的大小：

img.bg{ 
    min-height: 100%; 
    min-width: 900px; 
    width: 100%; 
    height: auto; 
    position: fixed; 
    top: 0; 
    left: 0; 
    z-index:-4;} 

#bg-img-1,#bg-img-2, #bg-img-3, #bg-img-4{ 
opacity:0;} 

img.d-4{ 
min-height: 100%; 
min-width: 1024px; 
width: 92%; 
height: auto; 
position: fixed; 
top:0; 
left:0; 
z-index:-3; 
opacity:0.3;} 

img.d-5{ 
min-height: 100%; 
min-width: 1024px; 
width: 92%; 
height: auto; 
position: fixed; 
margin-left:-50px; 
z-index:-3;} 

任何關於如何進一步優化和防止緩慢問題的幫助或意見非常感謝。

謝謝你們！ :)

Answer 1

那麼，你不能做很多優化動畫過程本身（除非你想修改jQuery本身）。你可以做的是儘量減少你的jQuery的構造函數調用：

$("#home-button").click(function(){ 
    $("#homem, #bg-img-4").fadeTo(2000, 1); 
    $("#location, #services, #contact, #bg-img-1, #bg-img-2, #bg-img-3").fadeTo(2000, 0); 
}); 

然而，這將會對動畫本身沒有影響。確保你使用的是最新版本的jQuery，因此它可以調用​​，這可能會解決你的一些問題。

如果這對於更流利地製作動畫沒有幫助，那麼您可以在序列中設置動畫，這會減少處理時間。可能看起來像：

$("#home-button").click(function(){ 
    (function _loop(nodelist) { 
     $(nodelist.shift()).fadeTo(2000, 0, function() { 
      _loop(nodelist); 
     }); 
    }(["#location", "#services", "#contact", "#bg-img-1", "#bg-img-2", "#bg-img-3"])); 
}); 

例：http://jsfiddle.net/FEYMQ/

Answer 2

這種優化將產生更少的jQuery對象，所以應該看到性能提升，我不知道，但把所有的動畫在一個函數調用也可能會在動畫中看到性能增益。

$("#contact-button").click(function(){ 
    $("#home, #location, #services, #bg-img-2, #bg-img-3,#bg-img-4").fadeTo(2000, 0); 
    $("#contact, #bg-img-1").fadeTo(2000, 1); 
}); 

Answer 3

謝謝你的建議jAndy和比利月亮。這些都是我在製作代碼時不知不覺地遵守的一些很好的做法。

在所有瀏覽器中，頁面轉換現在都很好，因爲只有在嚴格審查的情況下才能觀察到緩慢;以肉眼來看，它或多或少是可以接受的。

我認爲我需要首先向所有人道歉，因爲我遺漏了一個非常重要的代碼片段，我意識到這是導致大部分問題的原因。這裏最大的問題是，當我有兩個帶有ID的圖形 - ＃md4和＃md5 - 從左側滑入並淡入時，它開始變得非常乾燥。動畫只發生一次：進入主頁。爲動畫jQuery的：

$(document).ready(function(){ 
$('#md4').fadeTo(2000, 1); 
$('#md5').animate({left: "50px" }, 1800); 
$('.home').fadeTo(2000, 0.8); 
$('#bg-img-4').fadeTo(900, 1); 
$('#menu').fadeTo(2000, 1); 
$('#copyright').fadeTo(2000, 1);}); 

採取請注意，用IDS＃MD4和MD5＃提到的兩個圖形已經被風格，以適應，作物和比例延伸到瀏覽器的大小。下面是我之前提供，但要嵌入再次只是讓我們不要混淆代碼：

#md4, #md5{ 
min-height: 100%; 
min-width: 1024px; 
width: 92%; 
height: auto; 
position: fixed; 
top:0; 
left:0; 
z-index:-3; 
opacity:0.3;} 

正如前面提到的，我已經嘗試通過創建一個index.html頁來解決這個問題在進入主頁並加載所有jquery動畫之前將所有圖像加載到緩存中。從理論上講，它應該在處理負載上有一點點偏差，但在屏幕高於18「的Mac上，性能仍然非常低，無論瀏覽器如何，但FF版本4都是最好的。發生在18英寸以下的Mac屏幕上，但僅隔離到FF版本4及以下版本。

我已經玩過了連續發生而不是同時發生的動畫排序的想法，但是我一直在猶豫，部分原因是我害怕我會對一切事情的預期效果做出太多妥協，的性能助推器。對此的一些建議也將非常感謝。所以這裏最大的問題是：考慮到所有規定的參數（圖片和div在頁面加載時同時都在消失），我可以做什麼來優化所有最新的主流瀏覽器和屏幕尺寸的動畫這樣會有最小的緩慢。

非常感謝你提前傢伙。感謝所有從心底所提供的幫助。