HTML5 Canvas rajzolás sebesség gondok

Elkezdtem egy kis hétvégi hobbi-projektet, egy 2D-s, scrollozós-platformer engine-t szeretnék megvalósítani HTML5 Canvas és JavaScript segítségével.

Minden okés, fut ahogyan kell Chrome alatt. Nézem Firefoxszal (15.0.1), akad rendesen. Némi guglizás után kiderült, hogy a böngészők eltérően kezelik a setTimeout() függvényt, amivel az időzítést kezeltem.

Némi további keresgélés után végre megtaláltam a megoldást, a requestAnimationFrame kell nekem, pont erre találták ki, folyamatos lesz az animáció.

Persze az örömöm nem sokáig tartott, kiderült, hogy ezt is eltérően kezelik a böngészők.

Továbbkeresgélés... Erre is született már megoldás, a requestAnimationFrame polyfill kell nekem, ami eltünteti a böngészők közti eltérést.

Ok, próbálom, Firefox alatt ugyanúgy akad. Chrome alatt megy szépen, ugyanúgy mint előtte.

Amúgy Athlon II X3 445 @ 3.3GHz processzorom van, nem hiszem, hogy az a szűk keresztmetszet.

Itt egy egyszerű példa: http://paulirish.com/2011/requestanimationframe-for-smart-animating/
Még egy példa: http://www.watersheep.org/~markh/html_canvas/game.html (<- valami ilyesmit szeretnék amúgy összehozni)
Chrome-on mennek folyamatosan, Firefox alatt akadnak.

Tehát a kérdéseim:
Másnál is szaggat Firefox alatt?
Én csinálok valamit nagyon rosszul, vagy tényleg itt tart a HTML5?
Valakinek sikerült akadásmentes animációt kicsikarni valahogyan Firefoxból? Ha igen, hogyan?

Hozzászólások

Ezen a processzoron nem szaggat a 3.6.17-es Firefoxszal és Chromiummal sem ez a játék: http://www.watersheep.org/~markh/html_canvas/game.html

model name : Intel(R) Core(TM)2 Duo CPU P8600 @ 2.40GHz

Amúgy a HTML5 canvas általában szoftveres rendereléssel vam implementálva. Minél kevesebb objektumot rajzolj, minél kisebb felületre minél kisebb felbontású forrás képekből, minél kevesebb rétegből. A kép objektumoka cache-eld be, ne akkor töltse be a program, amikor először előkerül a játékban. Kicsi, egyszerű kezdet felől építsd a teljes színteret össze úgy, hogy közben folyamatosan mérd, hogy mennyi CPU-t eszik a programod.

Nálam (Win7 32 bit, Aurora 17.0a2(2012-09-24), AMD Athlon 64 XII 2400+) teljesen jól megy, semmi akadás nincs egyik animációnál sem.

all resistance is useless

Firefoxban about:support oldal alján meg tudod nézni, a hardveres videogyorsítás engedélyezésre került-e. Gyanítom, hogy inkább ez a hiba, és nem a kód rossz.

"Némi guglizás után kiderült, hogy a böngészők eltérően kezelik a setTimeout() függvényt"
"Persze az örömöm nem sokáig tartott, kiderült, hogy ezt is eltérően kezelik a böngészők."

HTML5 kills Flash!

Ok, most kipróbáltam egy teljesen másik gépen, szűzen telepített FF 15.0.1-el. Itt is akadnak az animációk, Chrome-ban pedig szépen mennek.

Azt hiszem levontam a tanulságot.

Én kipróbáltam 3GHz P4-en 1GB RAM-mal Chrome és FF 15.0.1 alatt is Win-en, illetve 1,Ghz Pentium D-n 768MB RAM-mal Debian testing-en Chrome és FF 15.0.1 alatt és a játék FF alatt egy kicsit akadt, de Chroöme alatt egyik rendszeren sem volt baj.