More HTML5 & HaXe Speed Tests

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)

16 Comments

Jonathan Dunlap

about 3 years ago

Wow! This is amazing... haXe [+Jeash] provides a perfect abstraction between Flash Player and browser JS platforms. http://www.jadbox.com 

Reply

Skial Bainn

about 3 years ago

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/

Reply

about 3 years ago

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

Reply

Skial Bainn

about 3 years ago

This link can explain it better than I can - http://paulirish.com/2011/requestanimationframe-for-smart-animating/

Reply

admin

about 3 years ago

Ahh, cool. Will definitely have another go using that soon. Cheers!

Reply

sHTiF

about 2 years ago

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.

Reply

Michael Cann

about 2 years ago

Ye you are right! Im not sure what happened.. New version of chrome changed something?

Reply

sHTiF

about 2 years ago

Doesn't seem like just a chrome change I am getting same results across different browsers.

Reply

about 2 years ago

Agreed. Just checked it in FF too.. Very odd, I wonder what changed?

Reply

Michael Cann

about 2 years ago

On the plus side the HaXe + Canvas version runs significantly faster now!

sHTiF

about 2 years ago

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

about 2 years ago

No i don't understand it either. Perhaps post it on the haxe mailing list?

Theola B. Coats

about 1 year ago

I will try this model for our website testing phases that includes crawl and loading tests.

Reply

Tai

about 8 months ago

Interesting. Testing in FF23/OSX I get 10FPS @ 5000 crawlers for both "HaXe + Jeash" and "pure HaXe", but 20FPS for "JS Canvas". In Chrome29/OSX I get 46FPS for "HaXe + Jeash", 40FPS for "JS Canvas", and 60FPS for "pure HaXe".

Reply

mikecann

about 8 months ago

Its been a while since I have tried it..

Reply

Leave a Comment

Leave a Reply