CSS Tricks: How to Speed Up CSS Rendering
onextrapixel.com
onextrapixel.com
Paul Irish said related to this: "If aren't getting 90+ Page Speed scores, its way too early to be thinking about selector optimization"
http://paulirish.com/2012/box-sizing-border-box-ftw/#comment...
That said, specifying image sizes is often a good idea in order to prevent the page from moving around while it loads. It looks a lot cleaner if your text all flows correctly and then the images pop into place.
I find that selector performance is not a problem unless you're dealing with large-scale one-page apps.
[1] http://nerds.airbnb.com/box-shadows-are-expensive-to-paint
Maybe because you said definitely JavaScript, and the GP said he had javascript disabled, but your point still stands.
I mean if you consider that just to have a facebook like box it involves loading a JS file, that then scans the page for FBML and then replaces it with an iframe (which also causes the page to repaint because its size is set after the dom is ready) and then the iframe requests 10+ additional files from facebook you understand why some pages take so long to render.
Anything else, page rendering times for me have only ever been slowed by too many DOM elements (> 1000). I've never come across a real-world case of the actual selector syntax making a difference.
on the other hand if you are running a single web app and have the time to spare it might be a good idea to look into this cause apart from nice visuals and intuitive UI, the more responsive your web app is the more likely users will not give up on it.
That's only true if you don't know how to sell yourself. Considering that you can make people think something is faster just by telling them that it is so, you should be able to get appreciated for actually making a difference.
But don't do this kind of thing in the course of your development. If you make something 10% faster without being asked, nobody is going to appreciate that. Fine-tuning and optimization is a separate service, and if you set realistic expectations and then deliver on them, your efforts will be appreciated.
But being aware how browsers are interpreting your CSS and being a bit mindful during development can be helpful.
form#UserLogin {} ID selectors are unique; it just makes them less efficient as they don't need a tag name to go along with it. Classes aren't unique, but it’s a good idea to avoid this method on classes too.
Re: classes - at least in IEold, and at least with jQuery, I found that performance for a selector like table.foo was orders of magnitude faster than .foo (for a page with a too-large DOM). IEold does not have a native document.getElementsByClassName so jQuery was searching the entire DOM for a .foo. This may be different for CSS vs JS though.