关于属性与类是否有任何性能（或其他）差异？ [复制]

Question

我很好奇添加类与向元素添加属性以动态设置它们的样式。

将 CSS 属性应用于满足特定参数的某些元素的约定通常是通过将类应用于该元素来完成的。例如，如果我单击一个按钮，则可以说该按钮处于活动状态 - 我可以选择在单击时对其应用自定义类，如下所示：

$(".button").click(function(){
    $(this).addClass("active");
});

CSS 很简单：

.button.active {
    transform: scale(1.5);
}

我的方法不同，我很好奇两者之间是否存在明显差异。我将属性应用于元素而不是类，如下所示：

 $(".button").click(function(){
     $(this).attr("active", true);
 });

使用这样的 CSS：

.button[active] {
    transform: scale(1.5);
}

我想知道我是否有任何理由不应该这样做，即这是一个不好的约定或其他什么，以及此方法是否存在任何性能差异。主要是好奇，但也想知道使用像 $(".button[active]") 这样的查询是否会比 $(".button .active") 的性能差。

Answer 1

Mozillas Writing efficient CSS tl;dr 为此：

1. 属性选择器是通用选择器

通用规则

所有其他规则都属于这一类。

例子

[hidden="true"] {…} /* A universal rule */`
* {…}     /* A universal rule */
tree > [collapsed="true"] {…} /* A universal rule */

1. 不要使用通用选择器。

避免通用规则

确保规则不属于通用类别！

但是有activediscussiononcssselectors。

最有趣的是，CSSLint 出于性能原因考虑disallowing unqualified attribute selectors。

因此，我会坚持使用已被证明具有高性能的类选择器（当一如既往地未被滥用时；））。

Answer 2

有人为similar 堆栈溢出问题的答案创建了性能测试。

http://jsperf.com/id-vs-class-vs-tag-selectors/2

看起来类选择器比属性选择器快得多，尽管数量显然取决于浏览器。