Child selectors are slower than more simple brethren. Is this true?

This is a affirmation that Jon Sykes sought out data for after he read the work of Jim Barraud.

His conclusion?

The skinny is that child selectors are a major performance issue.

This seemed to make sense, but to me I needed some sort of proof rather than just being told it’s that way by someone, so over the last two days I’ve tried two approaches to see if I can replicate the issue.

The first one was rather a half-assed idea that afterwards seems fundamentally flawed as a benchmark.

So I took a new approach which does seem to return some valid and rather interesting findings, particularly regarding Safari and Firefox 3 and how they react to child selectors and performance.

The tests show that there is slow down using child selectors over direct class name declarations in IE6, IE7 and Safari 3. Safari 3 being the most

impacted by child selectors. Firefox 2 has some impact, and Firefox 3 doesn’t seem to be impacted at all.

That said, this is a very extreme test, it is not often you’d have 20,000 class definitions in a single page or that all of them would use 4 levels of child selector.

Some developers said that .className may not render correctly compared to table tr td.className if you have 2 different rule sets. Since the second is more specific, it will take precedence.

What do you think? If this is true and I will have use more css classes.

1. Mark Aplet on July 4th, 2008 at 7:50 am

   I often wondered if there was a difference in performance and this article is very good background for future development.