即使在渲染文本時，Firefox上的HTML5低FPS

我正在編寫一個簡單的側滾動器，就像一個側面項目和HTML5一樣。然而，我一直有一些FPS問題 - 我通過優化渲染代碼和減少紋理尺寸來解決它們中的大多數問題。在大多數瀏覽器的大多數情況下，我的速度非常快，達到60 FPS ...除Firefox之外。最後，我將99％的代碼分離出來，直到我只將幀速率渲染到畫布上 - 我仍然可以在Firefox中看到25-30幀/秒的幀數。我在想我正在做一些根本錯誤的事情。我可以在微軟的Fish Bowl benchmark的火狐瀏覽器中獲得60 fps的高達250條魚，所以它似乎不是Firefox本身或我的系統。我的準系統代碼如下（我試圖用JSFiddle它，但我不認爲它喜歡HTML5）。請注意，我意識到由於我只是每秒更新一次幀率，因此我不應該在每一幀都渲染文本，但我已經用它來說明問題了。即使在渲染文本時，Firefox上的HTML5低FPS

<html> 
    <head> 
     <title>FPS Demo</title>      
    </head> 
    <body> 
     <div id="viewport">    
      <canvas id="layer1" width="640" height="480" style="border:1px solid #000000;"></canvas> 
     </div> 
     <script type="text/javascript"> 
      window.onload = function() { 
       GameLoop(); 
      }; 

      // Global vars 
      var layer1 = document.getElementById('layer1'); 
      var context = layer1.getContext('2d'); 
      var lastLoop = new Date; 
      var frameCount = 0; 
      var fps = 0; 

      // Simple gameloop 
      function GameLoop() { 
       requestAnimFrame(GameLoop); 

       // Calculate FPS 
       var thisLoop = new Date; 
       if(thisLoop - lastLoop >= 1000) { 
        fps = frameCount; 
        lastLoop = thisLoop; 
        frameCount = 0; 
       } 
       frameCount++; 

       // Render FPS as txt 
       context.clearRect(0, 0, 100, 20);  
       context.fillStyle = "black"; 
       context.fillText("FPS : " + (fps | 0), 10, 10);     
      }   

      /** 
      * requestAnim shim layer by Paul Irish 
      * Finds the first API that works to optimize the animation loop, 
      * otherwise defaults to setTimeout(). 
      */ 
      window.requestAnimFrame = (function() { 
       return window.requestAnimationFrame || 
         window.webkitRequestAnimationFrame || 
         window.mozRequestAnimationFrame || 
         window.oRequestAnimationFrame || 
         window.msRequestAnimationFrame || 
         function(/* function */ callback, /* DOMElement */ element) { 
          window.setTimeout(callback, 1000/60); 
         }; 
      })();    
     </script> 
    </body> 
</html>

任何援助將非常感謝！謝謝。

來源

2014-02-18 TimH

它看起來像是FPS渲染爲文本會減慢循環。

看看這個例子：http://codepen.io/anon/pen/CbLoc

我複製你的結果在Firefox，然後得到60 fps的只是幀率的渲染移動時，它的計算只發生。

至於爲什麼......我不確定。也許Firefox在畫布上渲染文本很慢？

來源

2014-02-18 01:50:52 robbles

謝謝。不幸的是，雖然我應該只在更新時才渲染fps文本，但我仍然用它來展示問題 - 只要我渲染每幀需要完成的任何內容（文本，精靈等等），Firefox就會退出下降到25-30 fps，而我測試過的所有其他瀏覽器都以60 fps的速度愉快地度過。 – TimH

即使在渲染文本時，Firefox上的HTML5低FPS

回答

相關問題