CSS类和属性选择器之间的性能

Question

I'm wondering if there is a performance issue using attribute selectors instead of class selectors.

div.test {}
div[test] {}

PS : I'm only interested in CSS performance, not JS.

Answer 1

根据这篇文章 ，类选择器比属性选择器更有效。

Answer 2

Someone has actually created a real life selector test that showcases selector matching performance.

The table outlines that attribute selectors are approximately 3x slower compared to standard classes.

Relying on attribute selectors also requires more characters to target an element. It's better to define short and concise class names to keep your stylesheet small.

Example:

// 17 Characters (attribute)
[title="example"] {
 ...
}

// 6 Characters (class)
.title {
 ...
}

http://scope.bitbucket.org/tests/selector-matching-performance/

Answer 3

According to this project there is no real performance issue.

This surprised us, since selector performance hasn't been a real concern in our day-to-day work for a while. Front-end performance is a huge deal, of course, but CSS selectors appear to contribute such a minuscule amount to the total page load time that it didn't occur to us that it might be a major concern to many people.

They have benchmarks as well.

https://github.com/amcss/am-benchmarks

Answer 4

There is no performance issue. Both act same. But there is difference in specificity of the css with class versus Elements.

Specificity - Specificity determines, which CSS rule is applied by browsers.

If two selectors apply to the same element, the one with higher specificity wins.

But specificity has hierarchy.

1. Inline styles (Presence of style in document). An inline style lives within your XHTML document. It is attached directly to the element to be styled. Eg
2. IDs (# of ID selectors) ID is an identifier for your page elements, such as #div.
3. Classes, attributes and pseudo-classes (# of class selectors). This group includes .classes, [attributes] and pseudo-classes such as :hover, :focus etc.
4. Elements and pseudo-elements (# of Element (type) selectors). Including for instance :before and :after.

Source: http://coding.smashingmagazine.com/2007/07/27/css-specificity-things-you-should-know/

Hence div.test {} is more specific.