jQuery：減少重新繪製

我需要優化圖像庫滑塊，因爲很多瀏覽器都很難處理動畫。jQuery：減少重新繪製

請考慮下面的例子：

var $div1 = $('#div1'), 
$div2 = $('#div2'), 
$div3 = $('#div3'), 
left = 0; 

function animate() { 
    left -= 10; 
    $div1.css({ 
    left: left + 'px', 
    width: 1000 - left + 'px' 
    }); 
    $div2.css('left', left - 10 + 'px'); 
    $div3.css('left', left - 40 + 'px'); 
} 

setInterval(animate, 20);

這當然是穿了很多瀏覽器的巨大壓力，它需要每20個MS三合一重繪！

有沒有什麼辦法可以克隆三個div，在離線狀態下工作，並且一次性替換所有這些，從而將重新繪製的數量減少到一個？

如果您有其他建議，請撥打隨時與我們分享。

謝謝！

來源

2010-09-16 John

Erm ... jQuery自己的'animate（）'有什麼問題？ – 2010-09-16 06:03:56

我只需在他們每個上設置動畫並讓它們運行20 ms？ – John 2010-09-16 06:30:06

我剛剛轉換爲動畫。它仍然是波濤洶涌，所以我不幸的是沒有獲得任何東西。 – John 2010-09-16 06:38:40

有幾種方法可以使此過程更具資源效率。

想法1：20ms可以達到50 FPS。你的平均好萊塢電影運行在24-30 FPS（我忘記了確切的幀速率）。嘗試33-40ms的間隔。

想法2：儘可能使用絕對定位，以儘量減少文檔其餘部分所需的迴流量。

想法3：將所有動畫合併到一個計時器中。我想大多數好的框架都會爲你處理這個問題。

最終，無論你還是你的框架都會迭代地爲每個選擇器設置CSS屬性，所以我認爲你會通過查看別處來實現你的收益。

來源

2010-09-16 06:11:51

爲什麼要投票？他要求提供其他想法。 – 2010-09-16 06:14:42

謝謝。 Idea1：我可以提高速度，但在大多數瀏覽器中仍然不穩定。 Idea2：我忘了說divs都是絕對定位的。 Idea3：單個計時器？我不確定我是否遵守。你能詳細說明嗎？ – John 2010-09-16 06:29:03

下面是MozAfterPaint的輸出：http：//pastebin.com/K3N0MZCW當做幻燈片時。 – John 2010-09-16 06:50:03

jQuery：減少重新繪製

回答

相關問題