CSS3 - What are the performance best practices? [closed]

Question

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!]

Answer 1

O yes! If you like to tinker with performance - you will be glad to know there is a LOT of performance issues with CSS3.

1. Repaint and Reflow. Its quite easy to cause unnecessary repaints and reflows, and thus make the whole page lag. Read: http://www.phpied.com/rendering-repaint-reflowrelayout-restyle/ Extreme example: http://files.myopera.com/c69/blog/lag-me.html
2. Scroll and hover. When you scroll or hover, browser must render new content. Webkit is smart here, as it caches pages as static images so it does NOT render page, when you scroll. But - you CAN bypass this optimization, by using things like transparent background in the block that you are scrolling, adding rotation on hover, adding position:fixed sticky headers/footers with and so on - effect will wary in different browsers, Opera seems most affected currently.
3. Box-shadow is evil. Box-shadows have different rendering quality in different browsers (low in Webkit, high in Opera/IE9, varies between Firefox versions) - and thus they their performance impact is different between different browsers - yet, inset box shadow, and box-shadows with large spread radius can cause observable hangs on redraw in any browser.
4. Floats, tables and their friends are evil. Sounds crazy at first, but read this article (in russian) - http://chikuyonok.ru/2010/11/optimization-story/ - it might save you some hair on your head. Main idea is - children of floated elements cause chain reflows on modification all the way up.
5. Border-radius is very expensive, even more expensive than gradients. Does not affect layout, but affects repaint. http://perfectionkills.com/profiling-css-for-fun-and-profit-optimization-notes/
6. Gradients lag. CSS gradients are very cool new tool, i'm a big fan of them. Yet just a couple of tests have shown that you should not use them, if you plan to have a lot of elements with gradient and require responsive interface :( There is a workaround/hack, though, - using canvas to render gradient images and set them as background via data url.
7. Transparency is expensive. If you have a number of moving elements that cross each other and are semi-transparent (opacity < 0, rgba color, png, rounded corners(!)) - expect lag. Often can be worked out by limiting the number of transparent elements, which can overlay.
8. Transitions are better than JS, but... Firefox is not able to render transitions correctly, if you apply them to over 150 elements simultaneously. Opera is not able to apply transitions to before and after. IE9 does not support them at all. Test before you use them, but in general - they are faster than JS analogues (jQuery.animate).
9. Watch out for CPU-load. Its hard to measure memory usage cross browser, (yet you can do it in chrome and interpolate results, with some grain of salt) but its easy to observe cpu-usage (via Process Explorer or system tools). Spikes will show you places, where you need your attention.
10. Old browsers are old. Do not attempt to modernize IE6, Firefox 2, Safari 3. Those browsers were never supposed to handle cool new stuff. Leave them alone. Just serve basic content with basic styles. Remaining IE6 users will be thankful for that.