3 ms·

Note that attribute selectors have really terribad performance on complex pages; avoid them if you're writing a single-page web app. (actually, most things hav

by ender7 14y ago

Note that attribute selectors have really terribad performance on complex pages; avoid them if you're writing a single-page web app. (actually, most things have terribad performance on complex pages, including inheritance selectors, :nth-child, sibling selectors, and tag selectors. Basically, the only selectors that are fast in CSS are IDs and classes with no inheritance. Wooo.)

debacle 14y ago
We did some benchmarking. It's easier to use jQuery to do the DOM traversal than it is to let CSS try and figure it out in most cases when you're using inheritance selectors.
acdha 14y ago
That statement is too broad to be correct: modern browsers have had work optimizing selector performance (see http://calendar.perfplanet.com/2011/css-selector-performance-has-changed-for-the-better/ http://calendar.perfplanet.com/2011/css-selector-performance...) and you really need to measure before drawing conclusions, particularly when the alternative of cargo-culting less semantic, harder to maintain code has its own costs and doesn't get as much performance attention as browsers do. Since there are are now CSS profilers for Chrome, WebKit and Opera (see http://perfectionkills.com/profiling-css-for-fun-and-profit-optimization-notes/ http://perfectionkills.com/profiling-css-for-fun-and-profit-...) you can also make the better comparison: your actual site. Examples: http://stevesouders.com/efws/css-selectors/csscreate.php?n=1000&sel=div[id]+%3E+a&body=background%3A+%23CFD&ne=1000 http://stevesouders.com/efws/css-selectors/csscreate.php?n=1... http://stevesouders.com/efws/css-selectors/csscreate.php?n=1000&sel=div+%3E+a&body=background%3A+%23CFD&ne=1000 http://stevesouders.com/efws/css-selectors/csscreate.php?n=1... http://stevesouders.com/efws/css-selectors/csscreate.php?n=1000&sel=div%5Bid%5D+a&body=background%3A+%23CFD&ne=1000 http://stevesouders.com/efws/css-selectors/csscreate.php?n=1... http://stevesouders.com/efws/css-selectors/csscreate.php?n=1000&sel=div+a&body=background%3A+%23CFD&ne=1000 http://stevesouders.com/efws/css-selectors/csscreate.php?n=1... All four are very close in time in Chrome and Firefox - within 10ms or so. In all permutations of this, what really makes the most difference continues to be the question of how quickly the browser can narrow the set of nodes under consideration, which usually comes down to how well your markup makes expressing relationships natural rather than syntax tricks.

by ender7 14y ago

debacle 14y ago

We did some benchmarking. It's easier to use jQuery to do the DOM traversal than it is to let CSS try and figure it out in most cases when you're using inheritance selectors.

acdha 14y ago

That statement is too broad to be correct: modern browsers have had work optimizing selector performance (see http://calendar.perfplanet.com/2011/css-selector-performance-has-changed-for-the-better/ http://calendar.perfplanet.com/2011/css-selector-performance...) and you really need to measure before drawing conclusions, particularly when the alternative of cargo-culting less semantic, harder to maintain code has its own costs and doesn't get as much performance attention as browsers do. Since there are are now CSS profilers for Chrome, WebKit and Opera (see http://perfectionkills.com/profiling-css-for-fun-and-profit-optimization-notes/ http://perfectionkills.com/profiling-css-for-fun-and-profit-...) you can also make the better comparison: your actual site. Examples: http://stevesouders.com/efws/css-selectors/csscreate.php?n=1000&sel=div[id]+%3E+a&body=background%3A+%23CFD&ne=1000 http://stevesouders.com/efws/css-selectors/csscreate.php?n=1... http://stevesouders.com/efws/css-selectors/csscreate.php?n=1000&sel=div+%3E+a&body=background%3A+%23CFD&ne=1000 http://stevesouders.com/efws/css-selectors/csscreate.php?n=1... http://stevesouders.com/efws/css-selectors/csscreate.php?n=1000&sel=div%5Bid%5D+a&body=background%3A+%23CFD&ne=1000 http://stevesouders.com/efws/css-selectors/csscreate.php?n=1... http://stevesouders.com/efws/css-selectors/csscreate.php?n=1000&sel=div+a&body=background%3A+%23CFD&ne=1000 http://stevesouders.com/efws/css-selectors/csscreate.php?n=1... All four are very close in time in Chrome and Firefox - within 10ms or so. In all permutations of this, what really makes the most difference continues to be the question of how quickly the browser can narrow the set of nodes under consideration, which usually comes down to how well your markup makes expressing relationships natural rather than syntax tricks.