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 ] + " ";
}
답변
이 질문은이 질문 의 중복으로 표시된 다른 질문에 이어 내 관심을 끌었습니다 .
이 답변은 약간의 추가 세부 사항과 함께 수락 된 답변을 요약합니다.
불필요한 검사를 피하여 최적화하려고합니다. 이와 관련하여 알아야 할 요소는 다음과 같습니다.
- 자바 스크립트를 통해 DOM 요소를 조작하여 클래스 속성에 중복 된 클래스 이름을 가질 수 없습니다. 당신이있는 경우
class="collapse"
귀하의 HTML에, 전화는Element.classList.add("collapse");
별도의 추가하지 않습니다 붕괴 클래스를. 기본 구현은 모르지만 충분해야한다고 생각합니다. - 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");