属性与类之间是否存在性能(或其他方面)差异

Are there any performance (or otherwise) differences concerning attributes vs. classes?

本文关键字：其他 方面 差异 性能 之间 是否 存在 属性      更新时间：2023-09-26

我很好奇添加类和添加属性的元素，以便动态样式。

为满足特定参数的某些元素应用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")的性能差，例如

Mozillas编写高效CSS tl;dr for this:

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

通用规则/strong>

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

[hidden="true"] {…} /* A universal rule */`
* {…}     /* A universal rule */
tree > [collapsed="true"] {…} /* A universal rule */
  • 不要使用通用选择器

    • 避免通用规则

    确保规则不会出现在全称范畴!

    但是关于css选择器的讨论非常活跃。

    最有趣的是，CSSLint考虑出于性能原因不允许非限定属性选择器。

    因此，我将坚持使用已经显示出性能的类选择器(当，一如既往，没有被滥用;)).

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

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

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

    相关文章：