
Canvas vs Canvas vs SVG performance on iPad - japetheape
http://techblog.floorplanner.com/2011/03/15/canvas-vs-canvas-vs-svg-performance-on-ipad/
======
ck2
Again, you are only testing the accuracy (and impossibility) of a 1ms
setInterval in javascript which cannot happen.

Here is your previous canvas test I modified to a real "zero" timeout

<http://jsbin.com/owino3>

With "zero" timeout I get 2000+ fps in firefox, 500+ fps in Safari 5 and 9000+
in Chrome 11.

(looks better in firefox/safari, in Chrome it goes so fast it's practically
trying to rip spacetime)

In your original "1ms" test they are all under 100 fps except Chrome which can
fire as fast as 4ms so it gets 200fps.

Basically all your tests across different browsers with your current code is
only proving how fast or slow that browser engine deals with a "1ms"
setInterval request. Most of them will not fire faster than 8ms, some slower
and some like chrome will go down to 4ms. Then because you are using
setInterval instead of setTimeout, you get a "backlog" because the event will
fire regardless if the previous one was done or not.

setZeroTimeout removes the entire timer overhead from the benchmark, it fires
as fast as physically possible in the browser used and the remainder of the
time is simply what's leftover from drawing the canvas or svg object.

~~~
hertog
I understand what you are saying, but I thought that it wouldn't matter for
browsers on mobile devices. I thought that the performance on a mobile device
was slow enough to ignore the setInterval limit. Apparently not, since your
test gives me a 200fps on my iPhone 3Gs.

However, although the fps is higher, the animation looks worse. Is that
because the 'render cycle' is not completed using this technique?

~~~
ck2
It's because browsers render in memory and then periodically update the video
display with a "snapshot" copy. Typically this method is fine for the regular
content of an average webpage.

But with zeroTimeout, the movement is happening so fast that the snapshot copy
is behind. The browser might be only updating the video every 20ms at the
fastest, while the block is moving several pixels every few ms.

But be assured the render of the block is completely happening and then being
erased. It's a proper render. If it wasn't, you'd get a permanent "smear" of
the results in the browser.

------
upinsmoke
Why doesn't Android support SVG? Is it coming in Honeycomb?

~~~
th0ma5
I've heard it is in Honeycomb, but I personally haven't tested it. I also
heard it may be in some Gingerbread builds.

------
geuis
I'm really glad to see this this morning. I've been working on something where
the 3d transform technique may have immediate benefit.

~~~
hertog
I'm glad to hear that. Hope it helps!

------
ronaldj
So where's the code showing the 3d transform technique?

~~~
hertog
You can see it here <http://lab.floorplanner.com/blog/fps_canvas_2.html>

