Bench testing performance of CSS

[csdude55]

A lot of my CSS threads really come down to the same thing: articles talk about X being slower than Y, but then other variables come in to play and I don't know whether they offset the performance. So they REALLY all have the same issue of not knowing how to bench test the performance myself.

Any suggestions?

I have scripts in place to bench test PHP and Perl, but since CSS should really be about rendering on the screen I'm not sure how test it. Especially if I'm comparing load time to render time.

[tangor]

Rendering tends to be more related to the receiving device ability, and that can be quite different for each user.

CCS optimization is generally based on size of the css and the NUMBER of css sheets involved, with the second part more likely to slow things (see all the comments regarding WP and themes)

[robzilla]

You can use the Performance tab in Developer Tools to measure render time.

Because you're looking at micro-optimizations, you'd need to blow up the size of the experiment the same way you'd benchmark something in PHP by running a piece of code X times.

So you could make a page with a thousand DIVs or whatever and then measure the difference between using something like div:not() vs giving certain DIVs a class that has the same effect.

It's less straightforward to run a thousand tests in Chrome to get reliable measurements. Either lots of clicking or a headless browser. Very time consuming probably.