

Canvas vs SVG performance on iPad - japetheape
http://techblog.floorplanner.com/2011/03/07/canvas-vs-svg-performance-on-ipad/

======
seanalltogether
Painting a single rectangle against a timer resolution of 1 millisecond (which
the browser won't even do) pretty much tells you nothing.

~~~
Dav3xor
Yes, exactly. I have a little web game that renders in SVG, and it puts up
~8000 shapes on the screen, updates at about 5hz on most desktop machines.
This is ok, since it's basically a panning map that doesn't get panned much.
If I switched to Canvas, it'd run quite quickly, but I'd lose all the wins
from using the DOM.

------
patr1ck
I don't think these test results are anywhere close to accurate. Why is the
iPhone 4, which has better specs than the iPad 1, 3x slower in the Canvas
test? What OS was used on each device? How many test runs were done, and what
was the variation like in each?

~~~
threepointone
this might help answer part of your query (from the comments)-

Timothy Fitz Says: March 8th, 2011 at 6:38 pm The iPhone 3GS almost always
ends up being the fastest of the iPhones. While the iPhone 4 has a faster CPU,
they both have the same GPU (PowerVR SGX 535). While the iPhone 4 has twice
the ram (which is fully addressable by the GPU), and could have a faster CPU
clockspeed (I couldn’t find reliable sources), at the end of the day the
iPhone 4 needs 4 times the fill rate to meet the increased resolution of the
retina display, and it doesn’t have even close to 4x the fill rate of the 3GS.

------
ck2
I believe this test proves little useful across different browsers on
different OS/hardware because setInterval and setTimeout cannot fire faster
than 8-10ms on most browsers and every browser handles a "1ms" request
differently.

<http://dbaron.org/log/20100309-faster-timeouts>

However the _postMessage_ trick is near realtime:

<http://dbaron.org/mozilla/zero-timeout>

~~~
seanalltogether
The point of a settimeout or setinterval is that it will always process in the
next run loop. I don't see how postMessage actually provides anything over
calling a function directly.

~~~
ck2
When I update to setZeroTimeout in those canvas vs svg demos, the drawing is
so fast there is horizontal tearing and the frame rates are in the thousands.

Which means the FPS with setInterval is actually measuring how long it takes
setInterval to fire, not how long it's taking to draw under the different
methods.

~~~
seanalltogether
But that's a feature you don't _really_ want. You're blowing away your cpu on
something that can only display 60 times a second.

~~~
ck2
The code in question is a benchmark of how fast two different render APIs
work. The only way to do that reliably is to take the question of the timer
firing rate out of the equation. I doubt you'd use setZeroTimeout in most
realworld environments.

------
extension
Somehow I doubt that SVG is being completely repainted every time its
coordinates change. And since the repaints are asynchronous, I don't see how
you could time them from within JavaScript.

~~~
hertog
I guess that not repainting everything can be an advantage of SVG. Can you
think of a way to time repaints better?

------
reirob
I did not know that Android does not support SVG. What's the reason?

~~~
th0ma5
it is my understanding that it is coming in honeycomb, i saw a bug report i
think about it just last week that was then several months old

