Why are selectors such as a[title="home"] slower than using class?

Question

I have been reading a lot of CSS performance articles, such as;

I get why selectors like this are bad

#social a {
}

As the browser will read a first, then is forced to loop through all the <a> tags in the page.

But why is a selector such as a[title="home"] slower than using a class?

I assume that the browser creates some sort of an index to be able to figure out what elements have a certain class (Correct?).

But shouldn't browsers also have indexed up what elements have a certain attribute? (such as title)?

My question is; why is the CSS / element look up way slower when using selectors such as a[title="home"] compared to using a class? What or how does the browser act in order that the result is so much slower?

"But shouldn't browsers also have indexed up what elements have a certain attribute?" -- do you think, this makes sense? A class says something like "Hey, I am of this type, anybody can do something with me!" while a placeholder attribute just says "Yo, browser, render me this way, and then forget about me". And since indexing takes some time, I think browsers decide to index just the first kind of attributes. — contradictioned, Aug 30 '13 at 09:18
FYI, the term "universal selector" specifically refers to the `*` selector. `a[title="home"]` is not a universal selector; `[title="home"]` without the `a`, on the other hand, you could say makes use of an *implicit* universal selector because it's equivalent to `*[title="home"]`. — BoltClock, Aug 30 '13 at 09:30
Also, "As the browser will read a first, then is forced to loop through all the tags in the page." This isn't how mainstream browsers behave; see http://stackoverflow.com/questions/5797014/why-do-browsers-match-css-selectors-from-right-to-left — BoltClock, Aug 30 '13 at 09:34

Barmar · Accepted Answer · 2013-08-30T09:40:44.630

3

Browser implementors optimize the most common cases. Since classes are used very frequently to match styles, they must implement this as efficiently as they can. When they load in CSS, they index the classes to make this possible.

Since random selectors like title="home" are not used very frequently, they can get away with implementing them using simpler searches. It won't have as much impact on performance, because it will rarely be used.

Classes also require special treatment in the browser, because an element may have multiple classes, e.g. class="foo bar baz". When parsing the document, the browser needs to split this up so that it can match any of them against CSS selectors.

edited Aug 30 '13 at 09:40

answered Aug 30 '13 at 09:22

Barmar

741,623
53
500
612

So your answer is basically, modern browsers create indexes for classes, but not for any other attributes. Hence using any other attribute than the class attribute will there by be slower? – corgrath Aug 30 '13 at 09:27
Yes. Classes and IDs are intended for use in selectors, so they've optimized for that use. – Barmar Aug 30 '13 at 09:28
1

Note that for this reason, using an attribute selector to match by the `class` attribute is not optimized. (Besides, if you're using attribute selectors to match class names, you're probably trying to match using special criteria that can't be achieved with a class selector anyway.) – BoltClock Aug 30 '13 at 09:32

daniel__ · Answer 2 · 2013-08-30T09:54:42.437

0

Benchmark

Conclusions

In most cases 'attribute selector with unknown attribute, e.g. [a="b"]' and 'attribute selector with known attribute, e.g. [title="a"]' showed up in the '3 Worst' category. It's safe to say you should avoid those selectors.

edited Aug 30 '13 at 09:54

answered Aug 30 '13 at 09:28

daniel__

11,633
15
64
91

Why did you test such old browser versions? – Barmar Aug 30 '13 at 09:30
@Barmar: He wasn't the one who wrote these tests. Steve Souders did. The article where the chart is taken from was written 4 years ago. – BoltClock Aug 30 '13 at 09:36
Neither of the test pages uses selectors like `a[title="home"]`. – Barmar Aug 30 '13 at 09:36
@BoltClock Yeah, I noticed that after I commented. Ancient benchmarks are hardly relevant to current browsers. – Barmar Aug 30 '13 at 09:38
The first paragraph of the Conclusion of that page confirms what the OP wrote: _'attribute selector with known attribute, e.g. [title="a"]' showed up in the '3 Worst' category._ – Barmar Aug 30 '13 at 09:51

Why are selectors such as a[title="home"] slower than using class?

2 Answers2