Comments on: A Shocking Truth about CSS

By: Diego Perini

Diego Perini — Mon, 15 Mar 2010 01:26:37 +0000

You may have a look at the “match()” method in NWMatcher selector engine, it does exactly that, compiles CSS 3 selectors to pure “bottom-up” ad-hoc resolver functions. This is what makes so incredibly fast and specs compliant.

I have setup a comparison between “internal” CSS selectors and frameworks/libraries selector engines here:

http://dl.dropbox.com/u/598365/css3-compat/css3-compat.html

the test was to measure consistency between the various implementation and frameworks actual browsers support and bug fixing capabilities. It looks like too much talk about speed instead of consistency.

@steve, selectors are used in several ways, there are situation where the “match()” or equivalent method is going to be called several times per seconds as in event delegation, so selectors engines performance is key to faster UI interactions, though some kb more to download

Thank you for the good article.

By: Steve Souders

Steve Souders — Wed, 10 Mar 2010 17:50:13 +0000

When I started researching performance of CSS selectors, I had heard horror stories of how they were responsible for bringing web pages to a crawl. As I dug into those specific test cases, it turned out it was a combination of bad CSS and bad JavaScript.

As I focused on pure CSS selector performance, I found that for most sites this isn’t a high priority to fix. But certainly for some sites it is a problem. I’ll plug Page Speed here ( http://code.google.com/speed/page-speed/ ) because it has a rule that checks for inefficient CSS selectors and lists the worst offenders.

Thanks for evangelizing this.

By: What We’re Reading - Open Blog - NYTimes.com

What We’re Reading - Open Blog - NYTimes.com — Wed, 10 Mar 2010 14:38:58 +0000

[...] A CSS Revelation Just a reminder: CSS selectors are applied right to left. Two developers share a moment of revelation. See also the original post by Steve Souders: Simplifying CSS Selectors. [...]

By: iPad Links: Tuesday, March 9, 2010 « Mike Cane's iPad Test

iPad Links: Tuesday, March 9, 2010 « Mike Cane's iPad Test — Tue, 09 Mar 2010 23:58:56 +0000

[...] No mention of fractions: Web Standards for E-books Why fractions matter: Is Adobe Hindering eBooks? A Shocking Truth about CSS Getting New Users to Stick: Deconstructing how the best sites convert visitors to customers (Part 1 [...]

By: k

Tue, 09 Mar 2010 22:01:21 +0000

Hey everyone,

Thanks for the comments! It’s very cool (and unexpected) to see this picked up.

Learning that CSS is process from right-to-left was a fun surprise — all the astonishment of overturning a fundamental assumption without any of the pain of having to make changes. (Much as John points out.)

Brad: thanks it worked out nicely. I wanted to write a blog post, so I just copied (nearly) word-for-word the gChat conversation I’d just had with my husband (M).

Steve and Bruno: thanks for the links. The Mozilla site is very enlightening and concretely useful. Do either of you know if other browsers handle CSS processing in a similar fashion as described in the Mozilla link?

I haven’t watched the video yet, but clearly we should.

Cheers,

Alex K

By: Stepan Reznikov

Stepan Reznikov — Tue, 09 Mar 2010 20:38:52 +0000

Yes, selectors are matched from right to left. But it works slightly differently than you described it here. Browsers DO NOT find DOM nodes for CSS selectors, it’s vice versa – for each DOM node browser finds matching selectors – and that explains why matching works from right to left.

By: John Boxall

John Boxall — Tue, 09 Mar 2010 16:18:22 +0000

While it’s great to be aware that this is the case, I think Steve’s final conclusion should be noted:

“For most web sites, the possible performance gains from optimizing CSS selectors will be small, and are not worth the costs. ”

http://www.stevesouders.com/blog/2009/03/10/performance-impact-of-css-selectors/

By: Brad

Brad — Tue, 09 Mar 2010 16:18:02 +0000

Awesome article. Gotta admit I love the conversational style. Nice job.

By: A Shocking Truth About CSS

A Shocking Truth About CSS — Tue, 09 Mar 2010 16:17:24 +0000

[...] full post on Hacker News If you enjoyed this article, please consider sharing it! Tagged with: ABOUT • [...]

By: Bruno Michel

Bruno Michel — Tue, 09 Mar 2010 14:21:07 +0000

You should watch this video: http://www.youtube.com/watch?v=a2_6bGNZ7bA (Faster HTML and CSS: Layout Engine Internals for Web Developers). It’s a great introduction to how browsers use CSS selectors and how they do the rendering of web pages.