Javascript 哪个性能更好，检查类还是添加类

如果您有一个在滚动事件中触发的函数，那么哪个更好

检查是否已添加类，如果未添加，则添加它

不做任何检查，只需在每次需要时添加类

或

---

第一次有一个额外的检查，但在另一次操作中可能（？）有一个更激烈的操作（？）

正如您所说，

.hasClass（）

是一个额外的检查，它占用了浏览器的内存。

.addClass（）

首先在内部进行检查，然后仅在特定类不存在时进行添加

因此，显然，

.addClass（）

和

.removeClass（）

比使用

.hasClass（）

首先检查性能更好。基本上，使用

.hasClass（）

是一项额外的无用工作

这是一个片段，用于证明

.addClass（）

已经检查了现有类或没有重复类名：

$（函数（）{
$（“#类检查”）.addClass（“类”）；
$（“#类检查”）.addClass（“类”）；
});
第二个是首选的，因为依赖于现有类调用
addClass/removeClass
会导致不引人注目的结果

也就是说，如果调用了
addClass
，并且该类已经存在，则不会再次添加该类

移除时相同。如果该类不存在，则什么也不做
我会选择选项2，就像在选项1中一样，您选择jQuery DOM只是为了测试该类是否可用，这应该是其中代价高昂的部分

也就是说，最好只在函数外部存储对DOM对象的引用一次，并且只处理该引用。
如果您关心性能，则可以/应该做以下几件事：

1。缓存选择器：

Dom交互是昂贵的，在您的情况下，可以多次调用
$（“nav.branding”）

将其存储在变量中，如so
var$branding=$（“nav.branding”）

2。使用普通javascript处理类

视情况而定

var branding=document.querySelector（'nav.branding'）

请记住，并非所有浏览器都支持MDN上的
classList
属性

关于您最初的问题：jQuery的
addClass
内置了一个检查类是否已经存在的功能，因此您最好在事先不使用
hasClass
的情况下使用，因为这会导致冗余，但请记住
addClass
比
classList
第一个解决方案更快，但不多。（读：应该是无关的）

如果您想要平滑的性能，我建议对函数进行节流

阅读：

节流确保仅每n毫秒调用一次函数

$(document).on('scroll', throttle(500, function () {
  var scrollTop = $(this).scrollTop();
  if (scrollTop > 50) {
    if (!$("nav .branding").hasClass("collapse")){
      $("nav .branding").addClass("collapse");
    }
  } else {
    if ($("nav .branding").hasClass("collapse")) {
      $("nav .branding").removeClass("collapse");
    }
  }
}));   

编辑：
正如@kitler提到的，存储对dom元素的引用是一个很好的技巧。
这就避免了jquery每次都必须查找元素。
不管性能如何，您都可以做一件事，那就是将任何选择器保留在滚动事件之外。只需在scroll事件处理程序外部创建一个变量来存储
.branding
元素。@user2740744，如果您对该问题的解决方案不满意，并希望对此进行更多讨论，请参阅。我在那里的回答中特别提到了您的问题。
addClass
不在内部执行检查，至少在他们的文档中是这样。如果他们在代码中执行了该检查，请将其添加到此处。@MichaelPerrenoud当然。我会的。这个答案毫无意义。hasClass防止addClass/removeClass在每个卷轴上运行event@AndreasM你的评论毫无意义！addClass有一个类似于
hasClass
的内置检查，因此使用
hasClass
会导致redundancy@PraveenKumar如果你在变量中添加关于节流和选择存储的要点，你的答案是一流的：）@Alex他的答案是基于性能的。这是迄今为止最好的答案，因为它解决了唯一的实际性能问题（在scroll事件中反复运行的选择），所以香草版本当然比任何非本机api都更受欢迎@Alex有一个观点：你不必检查类的存在性，
classList
API足够聪明：）@Alex可以随意给出答案：）就我而言，这个问题是用javascript标记的，有很多方法可以解决问题，这就是其中之一。这太健谈了。@Alex如果你发现缺少答案，要么补充，要么做一个更完整的答案。对于他们，请留下评论，说明你为什么否决了这个。
$(document).on('scroll', function () {
   var scrollTop = $(this).scrollTop();
   if (scrollTop > 50) {
      $("nav .branding").addClass("collapse");
   } else {
      $("nav .branding").removeClass("collapse");
   }
});

if (scrollTop > 50) {
  if (!branding.classList.contains("collapse")) {
    branding.classList.add("collapse");
  }
} else {
  if (branding.classList.contains("collapse")) {
    branding.classList.remove("collapse");
  }
}

$(document).on('scroll', throttle(500, function () {
  var scrollTop = $(this).scrollTop();
  if (scrollTop > 50) {
    if (!$("nav .branding").hasClass("collapse")){
      $("nav .branding").addClass("collapse");
    }
  } else {
    if ($("nav .branding").hasClass("collapse")) {
      $("nav .branding").removeClass("collapse");
    }
  }
}));