10

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

Haroldo
  • 36,607
  • 46
  • 127
  • 169
  • Interesting question. What are the results of your tests so far? Have you tried making a page with 500 divs easing out through each method (might also be worthwhile to try the Javascript approach too)? – Steven Sep 20 '11 at 13:35
  • It's an interesting question, but CSS is unlikely to be the performance bottleneck in any real life situation. – JJJ Sep 20 '11 at 13:37
  • @Steven Xu - haha, I thought I'd ask on here first. There's no point reinventing the wheel if someone has already produced an awesome resource online somewhere, i'd be best checking that out and then doing my experiments to expand upon what's already done... – Haroldo Sep 20 '11 at 15:14

2 Answers2

25

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.
c69
  • 19,951
  • 7
  • 52
  • 82
  • 1
    Thanks for the pointers! I would certainly disagree with the mods who closed this question for being "not constructive". I would regard your comments as highly constructive. TBH it seems demented that people are closing a question like this. – Haroldo Sep 21 '11 at 15:01
  • From what I know, box-shadow: inset with radius >= 15px is really slow in Safari. For other cases: just do not overuse this feature. – kirilloid Sep 21 '11 at 19:12
  • Both 2D and 3D `transforms` are very expensive, too, as are `animations`. But in most cases you will notice the performance impact without any external tips or tools ;) – c69 Jan 06 '12 at 12:16
  • `transition: all` is bad. http://stackoverflow.com/questions/8947441/css3-transitions-is-transition-all-slower-than-transition-x – c69 Mar 11 '12 at 02:08
-7

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.

desbest
  • 4,746
  • 11
  • 51
  • 84
  • 1
    ditto - flash on the iphone??? and also, jQuery is completely unrelated to Flash. – Spudley Sep 20 '11 at 14:03
  • Not quite sure how flash comes into it, I'm looking at manipulating dom elements. CSS, javascript and jquery use `css`, flash works on an entirely different canvas? – Haroldo Sep 20 '11 at 15:16
  • I'm saying that performance wise, Flash uses less CPU in terms of Video and Animation. HTML5 banner adverts have been known to throttle the CPU of powerful Macs. Also, if you have to use CSS Animation, I would advise you use JQuery .animate() for better performance. I made perfect sense. – desbest Sep 21 '11 at 08:35
  • jquery animate() performance is much, much worse than css3 in my experience. Jquery animate makes incremental timeout based css changes as far as I'm aware? – Haroldo Sep 21 '11 at 14:55
  • The animations that JQuery can do are very limited in comparison to CSS3. I'm not aware of any incremental timeouts when I use it. – desbest Sep 21 '11 at 16:34