Last year I spent a long time reading up on javascript performance, bottlenecks and best practices. On my latest project I'm using CSS3 with fallbacks to javascript/jquery for basic animations and effects such as hovers and am interested in experimenting with CSS3 further.
Are there issues with CSS3 performance?
If yes, what are the best practices?
For example does transition: all 150ms ease-out;
use more memory than transition: opacity 150ms ease-out, background-color 150ms ease-out;
?
[please don't just answer my example question!]
To test that out, you would have to make your animation happen 500 or 1000 times and time it.
Canvas and HTML5 animations way more CPU than flash. Flash on the iPhone outperforms HTML5 alternatives. I would do my animations, audio and video using JQuery as HTML5 swaps flexibility for convenience.
O yes! If you like to tinker with performance - you will be glad to know there is a LOT of performance issues with CSS3.
position:fixed
sticky headers/footers with and so on - effect will wary in different browsers, Opera seems most affected currently.inset
box shadow, and box-shadows with large spread radius can cause observable hangs on redraw in any browser.jQuery.animate
).