Which Is Performancewise Better, Check For Class Or Add Class

If you have a function which fires on a scroll event, which is better. Check if a class is already added and if not add it Don't do any checks but just add the class everytime nee

Solution 1:

If you are concerned about performance there are a few things you can/should do:

1. Cache your selectors:

Dom interaction is expensive, and in your case you call $("nav .branding") multiple times.

Store it in a variable like so var $branding = $("nav .branding").

2. Use vanilla javascript to handle the class

Depending on 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");
  }
}

Please keep in mind that not all browsers support the classList property, on the MDN you can find information about compatibility and also a polyfill.

Concerning your original question: jQuery's addClass has an inbuilt check whether the class already exists, so you're better to go when you dont use hasClass beforehand as it will cause redundancy, but do keep in mind that addClass is ~70% less performant than classList.

Solution 2:

The second is preferred because calling addClass/removeClass depening on an existing class results in an unobtrusive consequence.

Meaning, if addClass is called and the class already exists, it will not be added again.

Same for removing. If the class does not exist, nothing is done

Solution 3:

Like as you said, the .hasClass() is an extra check which takes up browser's memory. The .addClass() first checks internally and then adds only when the particular class is not there.

So, obviously, .addClass() and .removeClass() is more performant than using .hasClass() to first check. Basically, using .hasClass() is an extra useless effort.

This is a snippet to prove that .addClass() already checks for existing class or doesn't duplicate the class names:

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

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

Please I would request everyone to consider the above snippet as the proof for .addClass() not duplicating the class names.

A simple check in the console would have told you that calling addClass multiple times with the same class is safe.

Specifically you can find the check in the source:

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

Also, as Alex pointed out in comments, you can improve the performance if you store the jQuery selector objects. Instead of using $("nav .branding") multiple times, you can use: $nav_branding = $("nav .branding") and use the variable instead.

Solution 4:

The first solution is faster, but not by much. (read: should be irrelevant) https://github.com/jquery/jquery/blob/master/src/attributes/classes.js

If you want smooth performance I would recommend throttling the function.

read: https://remysharp.com/2010/07/21/throttling-function-calls

Throttling ensures that a function is only called every n ms.

$(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");
    }
  }
}));   

edit:

as @kitler mentioned storing a reference to your dom element is a good tip. this prevents jquery from having to find the element every time.

Solution 5:

I'd go with option 2 as in option 1 you do a jQuery DOM selection just to test if the class is available, which should the expensive part of it all.

That being said, it's probably best to store the reference to the DOM object only once, outside your function, and work on that reference only.