Ive spent a little more time this weekend looking at some more HTML5 with HaXe. Following on from my previous experiments with WebGL I decided to give HTML5′s Canvas a a look as it was supposed to be designed specifically for the purpose of doing 2D.
I had heard from the HaXe mailing list that the Jeash project was a common way of interacting with the canvas in HaXe. Jeash is a remapping of the Flash API into JS so in effect I should beable to take any of my usual flash code, Sprite’s, BitmapData’s, etc and it should run on the canvas no problems. Nice!
So I coded up a quick blitting example to see what sort of performance I would get:
http://mikecann.co.uk/projects/HTML5SpeedTests/HaXeJeash/bin/
The results were okay (I get about 11FPS with 5,000 crawlers) however I was interested to know what sort of cost HaXe adds. So I decided to code up a second example, this time using pure JS:
http://mikecann.co.uk/projects/HTML5SpeedTests/JSCanvas/
The results this time were better (14FPS with 5,000 crawlers) so I now wondered what happens if I do without Jeash and just code up the example using pure HaXe. I was expecting to see the same sort of performance hit as Jeash:
http://mikecann.co.uk/projects/HTML5SpeedTests/HaXeCanvas/bin/
Surprisingly it actually runs faster (17FPS with 5,000 crawlers) ! This is quite a surprise and totally contradicts my notion that going from HaXe -> JS would incur a cost. I was expecting some cost, but a performance increase?! I can only speculate that behind the scenes the JS engine in the browser is able to JIT compile the HaXe JS much better than the hand-crafted JS and hence more speed.
If you are interested in the source then I have uploaded it here: http://mikecann.co.uk/projects/HTML5SpeedTests/HTML5SpeedTests_1.zip
P.S. All the test were run on Windows 7 x64 in Chrome 14 (dev)
14 Responses to More HTML5 & HaXe Speed Tests
Jonathan Dunlap July 17, 2011
Wow! This is amazing… haXe [+Jeash] provides a perfect abstraction between Flash Player and browser JS platforms.
http://www.jadbox.com
Skial Bainn July 20, 2011
I see you have requestAnimationFrame in the source but dont see it used? In some of my tests I’ve done I’ve seen around a 10fps gain using it – mainly using this setInterval shim https://gist.github.com/1002116, alittle more at http://blog.joelambert.co.uk/2011/06/01/a-better-settimeoutsetinterval/
Anonymous July 21, 2011
I thought requestAnimationFrame was just a browsers way of preventing
rendering when the canvas isnt visible any more, how would it increase
FPS? Despite that ill have a go soon and see what sort of difference I get
Skial Bainn July 21, 2011
This link can explain it better than I can - http://paulirish.com/2011/requestanimationframe-for-smart-animating/
admin July 21, 2011
Ahh, cool. Will definitely have another go using that soon. Cheers!
sHTiF November 9, 2011
Did anything change since you posted this?
I am getting 2FPS with the HAXE/Jeash and 5000 crawlers whereas in the other tests i am getting over 30FPS easily.
Michael Cann November 9, 2011
Ye you are right! Im not sure what happened.. New version of chrome changed something?
sHTiF November 9, 2011
Doesn’t seem like just a chrome change I am getting same results across different browsers.
Anonymous November 9, 2011
Agreed. Just checked it in FF too.. Very odd, I wonder what changed?
Michael Cann November 9, 2011
On the plus side the HaXe + Canvas version runs significantly faster now!
sHTiF November 9, 2011
Yea but Jeash now seems unusable at all i am getting 40FPS with only 100 crawlers and the movement still lags a lot. I would really like to know what happened, i am new to Jeash and was looking into it just to try and port some flash stuff into html5 as easy as possible.
I even looked a little under the hood of Jeash and there is no explanation why simple clearing of the canvas using copyPixels without any crawlers drawing brings the performance to its knees :/
Anonymous November 9, 2011
No i don’t understand it either. Perhaps post it on the haxe mailing list?
Theola B. Coats April 1, 2013
I will try this model for our website testing phases that includes crawl and loading tests.