Canvas vs SVG performance on iPad (opens in new tab)

(techblog.floorplanner.com)

14 pointsjapetheape15y ago14 comments

14 comments

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

Dav3xor15y ago

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.

patr1ck15y ago

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?

threepointone15y ago

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.

ck215y ago

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

seanalltogether15y ago

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.

ck215y ago

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.

2 more replies

extension15y ago

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.

hertog15y ago

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

reirob15y ago

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

th0ma515y ago

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

j / k navigate · click thread line to collapse

14 comments

seanalltogether15y ago

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

Dav3xor15y ago

patr1ck15y ago

threepointone15y ago

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

ck215y ago

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

However the postMessage trick is near realtime:

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

seanalltogether15y ago

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.

ck215y ago

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.

2 more replies

extension15y ago

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.

hertog15y ago

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

reirob15y ago

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

th0ma515y ago

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

j / k navigate · click thread line to collapse