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

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")。

将其存储在类似于so var $branding = $("nav .branding")的变量中。

2.使用vanilla来处理类

取决于浏览器支持。

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上可以找到有关兼容性和多填充的信息。。

关于您最初的问题:jQuery的addClass有一个内置的检查类是否已经存在，所以您最好不要事先使用hasClass，因为它会导致冗余，但是请记住，addClass是~70%低性能而不是classList。

Answer 2

正如您所说，.hasClass()是一个额外的检查，占用浏览器的内存。.addClass()首先在内部进行检查，然后只在特定类不存在时添加。

因此，显然，.addClass()和.removeClass()比使用.hasClass()进行第一次检查更具有性能。基本上，使用.hasClass()是一种额外的无用的努力。

这是一个片段，可以证明.addClass()已经检查了现有的类，或者没有复制类名：

​

$(function () {
  $("#classCheck").addClass("class");
  $("#classCheck").addClass("class");
});

<script src="https://code.jquery.com/jquery-1.9.1.js"></script>
<div id="classCheck"></div>

​

请大家考虑将上面的片段作为.addClass()的证据，不要重复类名。

控制台中的简单检查会告诉您，使用同一个类多次调用addClass是安全的。

具体来说，您可以在来源中找到签入

if ( !~setClass.indexOf( " " + classNames[ c ] + " " ) ) {
  setClass += classNames[ c ] + " ";
}

此外，正如亚历克斯在注释中指出的那样，如果存储jQuery选择器对象，则可以提高性能。与多次使用$("nav .branding")不同，您可以使用：$nav_branding = $("nav .branding")并使用变量。

Answer 3

第二个是首选的，因为调用依赖于现有类的addClass/removeClass会导致一个不引人注目的结果。

这意味着，如果调用了addClass，并且类已经存在，则不会再次添加该类。

移除也一样。如果类不存在，则不会执行任何操作。