追加する前に、クラスがすでに割り当てられているかどうかを確認してください

jQueryでは、そのクラスを追加する前に、クラスが要素に既に割り当てられているかどうかを確認することをお勧めしますか？それでも効果はありますか？

例えば：

<label class='foo'>bar</label>

クラスbazが既にに割り当てられているかどうか疑わしい場合はlabel、これが最善の方法でしょうか。

var class = 'baz';
if (!$('label').hasClass(class)) {
  $('label').addClass(class);
}

またはこれで十分でしょう：

$('label').addClass('baz');

電話するだけaddClass()。jQueryがチェックします。自分でチェックする場合はjQueryのでしょうから、あなたは、仕事を倍増している、まだあなたのためのチェックを実行します。

コンソールで簡単にチェックすればaddClass、同じクラスで複数回呼び出しても安全であることがわかります。

具体的には、ソースでチェックを見つけることができます

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

この質問は、この質問の複製としてマークされた別の質問に続いて私の注意を引きました。

この回答は、受け入れられた回答を少し詳細にまとめたものです。

不必要なチェックを回避して最適化を試みていますが、この点に関して、以下の点に注意する必要があります。

1. JavaScriptを介してDOM要素を操作することにより、class属性に重複するクラス名を含めることはできません。あなたが持っている場合はclass="collapse"、あなたのHTMLに、呼び出し元はElement.classList.add("collapse");、追加追加されません崩壊のクラスを。根本的な実装はわかりませんが、それで十分だと思います。
2. JQueryは、その実装で必要なチェックをいくつかaddClass行いremoveClassます（ソースコードをチェックしました）。の場合addClass、いくつかのチェックを行った後、クラスが存在する場合、JQueryはそれを再度追加しようとしません。同様にremoveClass、JQueryはcur.replace( " " + clazz + " ", " " );、クラスが存在する場合にのみクラスを削除するということを行います。

注目に値することに、JQueryはremoveClass無意味な再レンダリングを回避するために、その実装でいくらかの最適化を行います。こんなふうになります

...
// only assign if different to avoid unneeded rendering.
finalValue = value ? jQuery.trim( cur ) : "";
if ( elem.className !== finalValue ) {
    elem.className = finalValue;
}
...

したがって、実行できる最善のマイクロ最適化は、関数呼び出しのオーバーヘッドと関連する実装チェックを回避することです。

あなたが名前のクラスを切り替えたいと言うcollapseあなたはクラスが追加または削除、および場合されたときの制御に完全にある場合は、collapseクラスが最初に存在しない、次のようにあなたが最適化することができます。

$(document).on("scroll", (function () {
    // hold state with this field
    var collapsed = false;

    return function () {
        var scrollTop, shouldCollapse;

        scrollTop = $(this).scrollTop();
        shouldCollapse = scrollTop > 50;

        if (shouldCollapse && !collapsed) {
            $("nav .branding").addClass("collapse");
            collapsed = true;

            return;
        }

        if (!shouldCollapse && collapsed) {
            $("nav .branding").removeClass("collapse");
            collapsed = false;
        }
    };
})());

余談ですが、スクロール位置の変更が原因でクラスを切り替える場合は、スクロールイベントの処理を抑制することを強くお勧めします。

$("label")
  .not(".foo")
  .addClass("foo");