Is IE9 performing better at drawImage ?

[Julien]

Hello.
I digged around with canvas and isometric map and I'm now on a point where my "panning map" fonction is working pretty smoothly on IE9 !! (standing 60 fps) while looking at the same time sluggish on others browsers (droping to less than 15 fps here in my poor hardware with Firefox, only catching around 25 with Chrome).

I know IE9 is supposed to have the worst javascript and canvas performance out there so I'm wondering what is likely to be wrong in my coding ways.
You can run a test here : http://188.165.192.213/game/html/game.php?Map=18323009
(Just try to get the mouse close to a map edge to move in this direction).

=> is IE that strong ? :-P

[Christoph Martens]

Well, IE is using DirectX, which doesn't require a properly installed driver in some cases. Your demo runs with 63fps in Chrome and Firefox here on Linux.

Also, you are producing too much garbage inside the jQuery parse that is called by the gameUpdate method in the games.js:211 which is caused by your worst-case usage of DOM properties inside the game loop:

$("#fps").html(fps+" Fps");

I recommend that you should learn about the garbage concepts behind JavaScript first, and, of course, that you should avoid jQuery in about 100% of use cases where a game is being built.

~Cheers,
Chris

[Luis Montes]

IE9 has a good canvas renderer with directX.  Everything else about it is pretty much awful though.  The JS engine, the dev tools, the lack of many HTML5 APIs...

Also, you must not be doing any hardware accel in chrome.  I'm getting 63 fps on you demo in Chrome on Linux.  You might want to check about:flags to see if things are turned off.

Luis

[Kevin Isom]

IE 9 (and 10) have great canvas support, in fact IE9 tends to be just as fast if not faster then other browsers for canvas games (at least in what I've been doing) and 10 is better. In fact on same hardware Chrome was the worst of the three and not by a little bit. But it depends on what the rest of your code base is doing. Those results were what I experienced. As for the FPS difference you are experiencing, do you have any plugins that are running in background? Though I have seen that the Chrome garbage collector can kill the performance of the browser, but not had that problem in the other two and didn't seem to get that experience in your demo. 

[Julien]

Thank everybody for the hints.
I'm surprised everybody could achieve around 60 fps while the 3 old computers I have at home could not. You might all be using nice machines ? Also I wonder if we are all talking about the moment when the map is actually being moved ? Because I can only reach 60 fps if the map is static. Maybe hardware is much more important than I tought ? On the worst case I'm running with a Intel Core 2 6600 @ 2.40Ghz with 2Go RAM and a GeForce 7300 Se 900Mo

=> I just find moving the map is costing me around 75-80% CPU usage on FF, 90-95% on Chrome and around 25-30% on IE. Because FF also display the graphics not as nicely as the others, I guess the trick can come from my graphic card "not getting proper drivers" and directX actually improving things for IE ?!

I have no special plugin installed on FF (except Firebug). None in Chrome. I activated hardware accel in Chrome wich is also not improving things.

==> As suggested I also read a bit about garbage collection (http://www.scirra.com/blog/76/how-to-write-low-garbage-real-time-javascript) and I now sadly understand that I must rewrite most of my code :(  Thank for pointing me this important topic.
I profiled the script in Chrome and can now track the memory usage and the garbage collection of what I'm writting.

I'll see if things get better when I'll be able to writte better code.
Thanks again for sharing.