Floorplanner Tech Blog

I’m doing a bit of HTML5 performance testing, specifically on the iPhone and iPad. When doing interactive stuff, it seems that most of the resources are used for updating the scene (clearing and drawing), and not so much by doing calculations in JavaScript. I created two very simple tests to see if the performance is different using Canvas or SVG. It’s a fabulous blue cube bouncing up and down as fast as possible. The number of updates (frames) per second tells something about the performance. The higher the number the better the performance. This is definitely no scientific method of performance testing. It’s just an indication, but it’s something. Here are my two tests, Canvas and SVG. The Canvas test clears and draws the square on its new position every interval (frame) by using clearRect and fillRect. The SVG test works a little different. The square is drawn once and its x-coordinate is updated every interval. These are my findings so far:

Device	OS	Browser	Canvas	SVG
MBP	OSX Leopard	Chrome 8	230	230
iPhone 3G	iOS 4.2	Safari	19	73
iPhone 3Gs	iOS 4.2	Safari	45	90
iPhone 4	iOS 4.2	Safari	30	80
iPad 1	iOS 4.2	Safari	90	95
iPad 2	iOS 4.3	Safari	42	96
Nexus 1	Android 2.2	V8	75	-
HTC Desire	Android 2.2	V8	75	-

I think it’s quite remarkable that my SVG test is twice as fast as my Canvas test on the iPhone (3Gs and 4). It’s strange to see that the iPhone 3Gs performs better than the iPhone 4. However, on the iPad 1 there is almost no difference. I’d love to compare the results of Android devices too, but Android doesn’t support SVG (yet?).