如何解決webkitRequestAnimationFrame給予極高的FPS

今天我一直在試圖讓自己熟悉HTML5所提供的任何東西，特別是畫布。我來到了網站www.html5canvastutorials.com，並開始關注一些教程，並在不同的瀏覽器中對代碼進行了一些改動。當我看到下面的例子時，我發現谷歌瀏覽器中有些奇怪的東西。 http://www.html5canvastutorials.com/advanced/html5-canvas-oscillation-animation/如何解決webkitRequestAnimationFrame給予極高的FPS

webkitRequestAnimationFrame函數應該有助於減少FPS（以及因此CPU成本），而不是主動在站點上，例如當您轉到不同的選項卡時。但是，當我嘗試這個例子時，我注意到這並不總是給人以愉快的結果。

谷歌瀏覽器作爲活動窗口，在當前選項卡上的網站：大約60 FPS，太棒了！
谷歌瀏覽器作爲活動窗口，在不同的選項卡上：獲得約1 FPS，非常好。
Google Chrome作爲活動窗口，在我的電視上（用作第二顯示器），120 FPS，奇數，但沒有投訴。
谷歌Chrome並不像活動窗口，但在不同的選項卡上，FPS左右也是如此，完美無缺。

那麼壞的部分：如果我的網站是當前選項卡上，但我有另一個窗口完全覆蓋谷歌瀏覽器窗口（例如說最大化的窗口），在FPS拍攝最多2500左右（和因此最多隻有一個CPU內核）。

當我在Firefox中嘗試使用同一個網站時，一切正常。

這小提琴是一個例子，其中它顯示的平均FPS自上次刷新：http://jsfiddle.net/kmKZa/55/ （我幾乎複製從教程網站的代碼）

我想知道我怎樣才能阻止這些可怕的CPU峯值如果有人有任何想法。預先感謝您的任何建議！

來源

2012-08-12 interest07

我見過類似的或多或少空requestAnimationFrame函數，看起來像是如果Chrome認爲沒有什麼可做的事情觸發requestAnimationFrame像地獄一樣。您可以檢查requestAnimationFrame的參數，如果過早延遲下一次setTimeout調用。 – noiv 2012-12-12 07:29:21

我無法在Chrome版本25.0.1364.152/OSX 10.8.2上重現此操作 – Jaibuu 2013-03-04 15:36:18

一種可能的解決方案是在模糊窗口時簡單地取消AnimationFrame循環，並在重新對焦時再次請求它。

var isPaused = false, 
    animFrame; 

loop(); 

$(window) 
    .on('focus', function() { 
     if(isPaused) { 
      isPaused = false; 
      loop(); 
     } 
    }) 
    .on('blur', function() { 
     cancelRequestAnimationFrame(animFrame); 
     isPaused = true; 
    }); 

function loop() { 
    //your crazy loop code 

    animFrame = requestAnimationFrame(loop); 
}

來源

2013-08-01 11:00:16

RAF在「空閒」時自動停止執行。 U不需要停止RAF循環執行

來源

2015-07-17 07:44:10

如何解決webkitRequestAnimationFrame給予極高的FPS

回答

相關問題