javascript - HTML5 low FPS on Firefox even when rendering just text -

I'm writing a side-scroller in HTML5, just as a side project and to get hold of HTML5 for. However, I am having some FPS issues - most of them I have just resolved by optimizing the render code and reducing the texture size. Most of the browsers on most browsers I am very much at 60 fps ... the exception of firefox Along with the end, I removed 99% of my code, as long as I'm using only framerate in the canvas - I still have Firefox Iche appears 25-30 fps. I am thinking that I am doing something wrong by default. With 60 fps in Microsoft Firefox, I can get more than 250 fishes, so it does not look like Firefox or my system.

My barebones code is as follows (I tried to JSDE it, but I do not think it's like HTML5). Note, I realize that since I am just updating every other framerate, I should not present every frame text, but I have left it to clarify the issue.

  & lt; Html & gt; & Lt; Top & gt; & Lt; Title & gt; FPS Demo & lt; / Title & gt; & Lt; / Head & gt; & Lt; Body & gt; & Lt; Div id = "viewport" & gt; & Lt; Canvas ID = "Layer 1" width = "640" height = "480" style = "border: 1px solid # 000000;" & Gt; & Lt; / Canvas & gt; & Lt; / Div & gt; & Lt; Script type = "text / javascript" & gt; Window.onload = function () {GameLoop (); }; // Global Wars layer layer 1 = document. GetElementById ('layer1'); Var Context = Layer 1.getContext ('2d'); Var lastLoop = new date; Var framescount = 0; Var FPS = 0; // Simple Gamelon Function Gameless () {requestAnimFrame (GameLoop); // calculate fps var thisLoop = new date; If (this loop - the last loop> = 1000) {fps = frameCount; The last look = elimination; Frame count = 0; } Framecount ++; // render FPS as TPS reference. Clear Line (0, 0, 100, 20); Context.fillStyle = "black"; Context.fillText ( "FPS: + (FPS | 0), 10, 10);} / ** * requestAnim shim layer Paul works to optimize * animation loop by Irish first API * finds * otherwise settime default (for). * / Window.requestAnimFrame = (function () {return window.requestAnimationFrame || window.webkitRequestAnimationFrame || window.mozRequestAnimationFrame || window.oRequestAnimationFrame || window.msRequestAnimationFrame || function (/ * function * / callback, / * DOMElement * / element) {window.setTimeout (callback, 1000/60);};}) (); & Lt; / script & gt; & Lt; / body & gt; & Lt; / Html & gt;  

Any help greatly appreciated Aagi! Thank you.

It seems that this rendering of FPS as text that slow your loop down like being.

check out this example:

I repeated my results in Firefox, and then just be moving only rendering to the framerate for when calculated Found from 60 fps

Why not ... I'm not sure. Perhaps Firefox is slow to translate text on canvas?