Filed under: Design, Developer
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
- Firefox 3 (OSX)
- Firefox 2 (OSX)
- IE 7
- IE6 and Safari (aprox. tie)
Descender selector
- Firefox 3 (OSX) and Firefox 2 (OSX) tie
- Safari
- IE 7
- IE 6
Child selector
- Safari and Firefox 3 (OSX) tie
- IE 6
- Firefox 2 (OSX)
- 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]
With Halloween fast approaching, it's a great time to get in some practice defending your territory against zombies. In Graveyard Shift, you take aim at zombies and other creepy-crawlies, blasting them into splatters of cartoony green guts. It's a casual first-person shooter, and it's very easy to get the hang of - use the mouse to aim, click to fire. Graveyard Shift has at least 15 levels, and it might even have some secret stages I haven't unlocked yet.
They key to getting good at Graveyard Shift is learning to use ...
Reader Comments (Page 1 of 1)
kingkool68 said 10:41AM on 6-11-2008
If your page is 1.8MB then you have other things to worry about then the performance of CSS selectors.
Reply
Patrick Beeson said 10:44AM on 6-11-2008
@kingkool68
That's very true. This test is definitely on the extreme end, but does reveal how certain CSS techniques can affect load time.
Reply
Dwight Stegall said 3:56PM on 6-11-2008
Who cares if it takes longer for a page to load with Css Selectors in it? Think back to how bad pages looked when we had no CSS at all. It doesn't seem so bad now does it? Wasn't HTML 3.2 fun? :(
Reply
Patrick Beeson said 4:13PM on 6-11-2008
Web designers might care because their users care if pages take longer to load. :)
But seriously, I think this is good news for browser makers to take note if since they could get behind any effort to increase performance.