Google describes this and a bunch of other great stuff about how to optimize page rendering: http://code.google.com/speed/page-speed/docs/rendering.html#...
A Shocking Truth About CSS
11–20 of 70 posts
Re: A Shocking Truth About CSS
#12Can anyone point to where this is required by the css specification? Or is this an implementation detail? The reality may be that all the browsers do it this way, but why couldn't someone add some more smarts to choose selectors based on selectivity, just as a SQL query planner would?
It’s quicker to walk up a DOM tree than it is to walk down - that’s the root reason why browsers have all implemented it this way.
Yeah, but if we do something like this:
#alert > p { background: yellow }
's? (I am assuming that nodes with ids have their own fast index.)
Re: A Shocking Truth About CSS
#13Please, using more CSS selectors than DOMs isn't going to kill a site. In fact, it isn't even close to being a bottleneck. We are talking milliseconds. If you want speed gains, properly compress your images!
Re: A Shocking Truth About CSS
#14(from the header:) The Two Alexs Alexes? Alex's? Alexi? Alexim? In hackanonical form, Alexen. As in oxen, vaxen, boxen.
As in regexen. :)
Re: A Shocking Truth About CSS
#15Please, using more CSS selectors than DOMs isn't going to kill a site. In fact, it isn't even close to being a bottleneck. We are talking milliseconds. If you want speed gains, properly compress your images!
Wait, are you saying that a computer capable of executing millions of instructions per second doesn't take very long to do a few comparisons on a dozen or so elements? It takes me a long time to do by hand, so I figured the computer would be really slow too!
Re: A Shocking Truth About CSS
#16The "Two Alexes" are just discovering (Feb 2010) what Steve Souders explained in detail at http://www.stevesouders.com/blog/2009/06/18/simplifying-css-... [which is probably the site you want to visit on "How CSS strategies affect site performance"] (June 2009).
Being "scooped" by a mere 6 months, on a 10 year old technology doesn't really make their realization dated. It's new to me, and I bet it's new to most news.yc-ers.
/me mumbles something about Reading The Fine Source. Then you don't have to guess what your browser is doing.
Re: A Shocking Truth About CSS
#17Please, using more CSS selectors than DOMs isn't going to kill a site. In fact, it isn't even close to being a bottleneck. We are talking milliseconds. If you want speed gains, properly compress your images!
I've known about how selectors are processed for some time, I discovered it when I was looking into optimization strategies for JavaScript and figured I should look into how CSS is processed. I made a variety of tweaks, including finally just removing nearly all the CSS, and (somewhat disappointed) did not see any visible changes in the speed at which the browser rendered the page. Not even on IE6/7. Anecdotal evidence only, but to Jim72's point, I wouldn't waste time on it.
Re: A Shocking Truth About CSS
#18Earlier quoted context omitted.
It’s quicker to walk up a DOM tree than it is to walk down - that’s the root reason why browsers have all implemented it this way.
Yeah, but if we do something like this: #alert > p { background: yellow } Surely the intelligent thing for the CSS engine is to look for the one-and-only #alert, rather than work backwards from all the 's? (I am assuming that nodes with ids have their own fast index.)
id attributes are unique in well formed pages, but then a lot of HTML is not well formed. Browsers do maintain a hashmap (or equiv) of id to node though, so in that case you’re right, that should be faster. Maybe the overhead of parsing and choosing multiple code paths is slower than just walking the tree?
Re: A Shocking Truth About CSS
#19I do not like their blog gimmick.
Re: A Shocking Truth About CSS
#20Earlier quoted context omitted.
Being "scooped" by a mere 6 months, on a 10 year old technology doesn't really make their realization dated. It's new to me, and I bet it's new to most news.yc-ers.
/me mumbles something about Reading The Fine Source. Then you don't have to guess what your browser is doing.
Trying to figure out HTML from reading the Firefox source is kind of insane.