关于属性与类之间是否有任何性能(或其他)差异？

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

有人创建了一个性能测试来回答类似的堆栈溢出问题。

看起来类选择器比属性选择器快得多，尽管显然数量会根据浏览器而变化。