How to test CSS selector performance?

Question

How would I go about testing the performance benchmarks of different css selectors? I've read articles like this. But I don't know if it is applicable to my website because he used a test page with 20000 classes and 60000 DOM elements.

Should I even care,does performance really get downgraded that much based upon the css strategy you take?

Fo example, I like doing this ...

.navbar { background:gray; }
.navbar > li { display:inline;background:#ffffff; }

<ul class="navbar">
  <li>Menu 1</li>
  <li>Menu 2</li>
  <li>Menu 3</li>
</ul>

... but I could do this ...

.navbar { background:gray; }
.navbar-item { display:inline;background:#ffffff; }
<ul class="navbar">
  <li class="navbar-item">Menu 1</li>
  <li class="navbar-item">Menu 2</li>
  <li class="navbar-item">Menu 3</li>
</ul>

Some would say (and might be right) that the second option would be faster.

But if you multiply the second method across all pages I see the following disadvantages:

1. The page size will increase because all the elements having classes
2. Number of css classes can get quite large which would require more css class parsing

My pages seem to be ~ 8KB with ~1000 DOM elements.

So my real question is how do I create a test bed where I could test performance deltas based on strategy taken for realistic web page sizes? Specifically how do i know how long it takes for a page to be displayed? javascript? how exactly?

Help and just plain opinions are welcome!

Answer 1

I don't have a direct answer to your question of how to build a page speed testing program. However, I will offer you some best practice guidelines to follow that will steer you in the right direction.

The page size will increase because all the elements having classes

The size of adding numerous classes is very much negligible for two reasons:
1) The additional size in your stylesheet will be cached (assuming you use externals, which you should).
2) The HTML markup from adding numerous classes to the DOM is 1kb at most. If it's more, than you need to take better advantage of inheritance.

Number of css classes can get quite large which would require more css class parsing

You will have more CSS classes, yes... but binding rules to a CSS class is actually faster than the alternative of using descendant or adjacent selectors.

As long as you avoid descendant/adjacent selectors as much as reasonably possible, you use external stylesheets, and you take advantage of inheritance to reduce duplicate rules, you shouldn't need to worry about CSS performance stress tests.

Answer 2

Check out the Page Speed extension for Firefox. Once you run it for a page, under "Use efficient CSS selectors" it gives you a list of the offending CSS selectors along with brief explanations.

Also, there's another extension for Chrome - Speed Tracer. Amongst other things, it offers insight into time spent on CSS style recalculation and selector matching. This may just be what you are looking for.

Answer 3

From reading the article you listed it looks like the difference between the two type of selectors is not worth worrying about. Make certain the css is clear enough to understand it, and only worry about speed after that proves to be the bottleneck.