Many people are talking about html5 and the death of Flash in these days, so I decided to do a small speed comparison of map renderings between HTML5 and Flash. I took the quick and dirty example from my previous map rendering tutorial and ported it into html5/javascript. The only thing it does is reading in a fat list of 95,162 map coordinates, projecting them using the Hatano projection and finally rendering the resulting polygons on screen. I chose Hatano because it’s a nice looking projection with only a few lines of code. You can benchmark the rendering yourself by visiting the html5 map rendering demo and the flash map rendering demo. I tested the browsers Firefox 3.6.3, Chome 4.1 and Internet Explorer 8 on my notebook (intel core 2 cpu, t5600 @1.83GHz, 2gb ram) and averaged the results over 10 test runs. So here are my results. I achieved the fastest map projection calculations in Firefox (314ms), followed by Chrome (657ms) and Flash (1,036ms). The fastest map renderings were achieved in Flashplayer (83ms), followed in distance by Chrome (446ms) and Firefox (610ms). Seems as if the days of flash aren’t counted yet (no big surprise). Also no surprise are the bad results of the internet explorer, because it lacks a native implementation of the html5 canvas. If you really want to run the tests in IE8 you probably want to disable the javascript timeout notifications in the registry ;-). You find the complete list of my test results below.

Comments

vtstarin (Apr 29, 2010)

Surprise!

I use Linux System x86_64, 2.6.18-164.15.1.el5.centos.plus , Firefox 3.0.18 and Flash Player version 10.0.45.2

My test result

for JS getFile() parseMap() projection took 1.443 secs (1443 ms) drawMap() drawing took 0.565 secs (565 ms)

for Flash AS3 projection took 287 ms drawing took 34 ms

also I tested in Opera/9.80 which has same result(nearly) for Flash; but fast drawing took for JS - 0.237 secs (237 ms)