Tests confirm CSS selectors slow load times

Most Web designers make liberal use of CSS selectors, but that spec's sibling, descendant and child selectors can cause what designer/developer Shaun Innman calls a "significant, negative impact on page rendering." This is confirmed in tests done by UI Specialist Jon Sykes that are published on his blog.

Fortunately for most designers, the performance impact is only in extreme situations. But it's definitely something to be aware of when writing CSS.

The test was based in part on a comment by Dave Hyatt on an entry from Inman's blog.

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]

Tags: css, page load, PageLoad, performance, web design, WebDesign