

CSS3 vs. CSS: A Speed Benchmark - acrum
http://www.smashingmagazine.com/2011/04/21/css3-vs-css-a-speed-benchmark/

======
inji
If the differences between css3 and no-css3 is so small as in this test (a few
rounded corners, some drop shadows and some tiny gradients), you should
totally go with pure css3 since it'll get easier to maintain but still look
decent in old browsers. If you're having heavy artwork which will have huge
impact on the experience; go with images (perhaps a mix?)

------
someone_here
This is the kind of benchmark I like to see for _any_ technology.

Anyone know of anything similar for other web technologies?

~~~
lloeki
Indeed. Although it is _"just one experiment, and the outcome was influenced
by [his] own abilities."_ this kind of "benchmark" is what gives me ammo
against grumpy, entranched dev who goes " _new_foo_ is useless anyway, I can
do that with _old_bar_ too", and to make a hesitant hierarchy finally make a
leap forward instead of clinging into aging, "mastered" technology.

------
lovskogen
Gah. That's obvious. But he didn't test the _performance_. That's the real
pain of CSS3 versus CSS. Try using box-shadow, or lots of gradients on a
medium old machine – then you'll get a sluggish experience.

~~~
snprbob86
box-shadow is _seriously slow_

We had a site with the main content area shadowing over the nav bar. When the
browser window was large on my big monitor scrolling was very sluggish.
SpeedTracer (in Chrome) was reporting 90 to 110ms times per render, dozens per
flick of the mouse wheel! Replacing the box-shadow with an image resulted in 6
to 10ms per render: silky smooth.

~~~
lovskogen
Yeah box-shadow is the worst, especially if you scroll. So I wonder why the
author doesn't mention this.

~~~
BasDirks
box-shadow > 12px (radius) get's bad. It's possible to have a dozen or more
elements with box-shadow < 8px (radius), and have the same performance as one
element with box-shadow > 18px.

~~~
lovskogen
Why is that?

~~~
BasDirks
I don't know why. I'd love to know. It must be a really sloppy implementation.

------
mgcross
I appreciate the comparison, and I know it's nitpicking, but those images seem
much heavier than they need to be. Using JPGs and/or 8-bit PNGs for the header
and sub images could have saved 400K or so.

