CSS selector performance?

Question

Is there a performance difference between these 2 selectors assuming they match the same # of elements (a single form)?

#master .body form {}

#master form {}

I've heard that CSS selectors can make an appreciable speed difference for page rendering. I was also curious if this applies mostly to page load times or also for scenarios where you add a class to an element via JavaScript and how fast the browser can render that visual change.

See ajaxian.com/archives/css-child-selector-performance for the benchmark. — Rob W
– Rob W, Commented Feb 15, 2012 at 22:27
I know that a child selector is slower than a dedicated class/id. But since my form has no dedicated class/id my question is if its better/worse to specify the .body parent — C.J.
– C.J., Commented Feb 15, 2012 at 22:30
I have never came across performance slowing down from using css selectors. Usually it is orders of magnitude faster than loading a picture or actually doing the requested rendering on the page. Sure, requesting the entire DOM object for parsing could become problematic at some point depending on the frequency - but it would most likely still pale in comparison to the action being done with that DOM object once found. — Travis J
– Travis J, Commented Feb 15, 2012 at 22:34
The speed that the page renders will not be affected by how the selectors are found - it will be 99% based on the rendering. For example, the time to search through all the tables and all the table rows and all the table cells to find the object to apply the style to will take an insignificant amount of time compared to actually applying that style and rendering it on the page (such as a div which uses an overlay to dim the page). — Travis J
– Travis J, Commented Feb 15, 2012 at 22:38
Yeah, I don't expect any huge speed difference. It's more of an intellectual curiosity. — C.J.
– C.J., Commented Feb 15, 2012 at 22:40

Yannick Schall · Accepted Answer · 2012-02-15 23:05:48Z

1

interesting stuff in there: http://calendar.perfplanet.com/2011/css-selector-performance-has-changed-for-the-better/, http://www.stevesouders.com/blog/2009/03/10/performance-impact-of-css-selectors/

answered Feb 15, 2012 at 23:05

Yannick Schall

35.3k6 gold badges33 silver badges42 bronze badges

Sign up to request clarification or add additional context in comments.

Comments

Cmorales · Accepted Answer · 2012-02-15 22:47:21Z

1

Google has a plugin for Firebug/Developer Tools that analyzes your page's speed. One of its tabs is for CSS selectors. You just have to run it and it will tell you which one is better.

From what I know, by the way, the first is slower. The less elements you need to select, the better.

answered Feb 15, 2012 at 22:47

Cmorales

1,0171 gold badge11 silver badges24 bronze badges

1 Comment

C.J. Over a year ago

Do you know what it's called?

Collectives™ on Stack Overflow

CSS selector performance?

2 Answers 2

Comments

1 Comment

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

Comments

1 Comment

Your Answer

Sign up or log in

Post as a guest

Related