Download Squad

For the Web designer n00bs reading this: CSS selectors are names given to styles -- font-size, color, background-color, etc -- in internal and external style sheets that dictate a Web page's design. By using sibling, descendant (two or more selectors) and child selectors (a selector that's a "child" of another selector), designers can apply greater control over the CSS for their pages.

Sykes' test uses a 20,000-item loop in an HTML document. Within that document, he uses three levels of nested "div" tags, the lowest containing a "paragraph" tag that also contains an "anchor" tag. The anchor tag is targeted and styled using the CSS.

The test also consists of three parts: class (each anchor tag gets a unique class name), descendant selectors and child selectors. The results -- listed by the browsers with the largest performance hit -- were as follows:

See Sykes' graph of his results

Class

1. Firefox 3 (OSX)
2. Firefox 2 (OSX)
3. IE 7
4. IE6 and Safari (aprox. tie)

Descender selector

1. Firefox 3 (OSX) and Firefox 2 (OSX) tie
2. Safari
3. IE 7
4. IE 6

Child selector

1. Safari and Firefox 3 (OSX) tie
2. IE 6
3. Firefox 2 (OSX)
4. IE 7

Note that Opera 9 (OSX) was excluded because it couldn't render the test page for Sykes.

Sykes does point out that this test measures the performance under extreme circumstances -- there aren't many Web pages with this amount of markup or styling. But he does caution that descender and child selectors can cause at least a slight drop in browser performance.

You can download Sykes' tests in ZIP format.

[VIA Shaun Inman]