即使在渲染文本时，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

回答

相关问题