哪个表现更好,检查课程或添加课程

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.使用vanilla javascript来处理该类

取决于浏览器支持.

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上您可以找到有关兼容性的信息以及polyfill.

关于你原来的问题:jQuery的addClass有一个内置的检查类是否已经存在,所以你更好,当你不使用去hasClass事前,因为它会导致冗余,但千万记住,addClass是〜70%少高性能比classList.