Question

我正在HTML5中编写一个简单的横向卷轴，就像一个侧面项目，并且可以掌握HTML5。但是，我一直有一些FPS问题 - 其中大多数我只是通过优化渲染代码和减少纹理大小来解决。在大多数情况下，在大多数情况下，我几乎都是60 FPS ......除了Firefox。最后，我将99％的代码切掉，直到我只将帧速率渲染到画布上 - 我仍然在Firefox下看到25-30 fps。我在想我做的事情根本就是错误的。我可以在微软的Fish Bowl benchmark上使用最多250条鱼获得60 fps的火狐，因此它本身似乎不是Firefox本身或我的系统。

我的准系统代码如下（我试图JSFiddle它，但我不认为它喜欢HTML5）。注意，我意识到因为我每秒都只更新帧速率，所以我不应该每帧渲染文本，但是我已经用它来说明这个问题了。

<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>

非常感谢任何帮助！感谢。

Answer 1

看起来这是FPS的渲染，因为文字正在减慢你的循环。

查看此示例：http://codepen.io/anon/pen/CbLoc

我在Firefox中复制了你的结果，然后仅仅通过将帧速率的渲染移动到仅在计算时发生就获得了60 fps。

至于为什么......我不确定。也许Firefox在画布上渲染文本很慢？

Firefox上的HTML5低FPS，即使只渲染文本也是如此

1 个答案: