javascript - 检查类或添加类，哪个性能更好

Question

如果您有一个在滚动事件上触发的函数，那就更好了。

1. 检查某个类是否已添加，如果没有则添加
2. 不进行任何检查，只需在每次需要时添加类即可。

$(document).on('scroll', 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");
   }
});

或

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

第一次有额外的检查，但在其他操作中可能(？)有更激烈的操作(？)

Answer 1

如果您担心性能，您可以/应该做一些事情:

<强>1。缓存您的选择器:

Dom 交互的成本很高，在您的情况下，您会多次调用 $("nav .branding") 。

将其存储在变量中，如下所示 var $branding = $("nav .branding")。

<强>2。使用普通的 JavaScript 来处理类

取决于browser support .

var Branding = document.querySelector('nav .branding');

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

请记住，并非所有浏览器都支持 classList 属性，在 MDN 上您可以找到 information about compatibility and also a polyfill .

关于你原来的问题:jQuery的addClass有一个内置的检查该类是否已经存在，所以你最好在不使用hasClass之前就去，因为它会导致冗余，但请记住 addClass 是 ~70% less performant比classList。