JQ 최적화 방법

1. 체인 쓰기 사용

2.事件的委托处理（Event Delegation）

JavaScript의 이벤트 모델은 "버블" 모드를 채택합니다. 즉, 하위 요소의 이벤트가 단계적으로 위로 "버블"되어 상위 요소의 이벤트가 됩니다.

이를 사용하면 이벤트 바인딩이 크게 단순화될 수 있습니다. 예를 들어, 100개의 셀(td 요소)이 포함된 테이블(table 요소)이 있습니다. 이제

각 셀에 클릭 이벤트(click)를 바인딩해야 합니까? 다음 명령을 100번 실행해야 합니까?

<span style="font-size: 15px">$("td").on("click", function(){
$(this).toggleClass("click");
});<br/>回答是不需要，我们只要把这个事件绑定在table元素上面就可以了，因为td元素发生点击事件之后，<br/>这个事件会"冒泡"到父元素table上面，从而被监听到。<br/>因此，这个事件只需要在父元素绑定1次即可，而不需要在子元素上绑定100次，从而大大提高性能。<br/>这就叫事件的"委托处理"，也就是子元素"委托"父元素处理这个事件。<br/></span>

<span style="font-size: 15px">$("table").on("click", "td", function(){ $(this).toggleClass("click"); });<br/></span>

3. 올바른 선택기 사용

(1) 가장 빠른 선택기: id 선택기 및 요소 레이블 선택기

이러한 선택기를 만나면 jQuery는 자동으로 브라우저의 기본 메서드(예: getElementById())를 호출하여 실행합니다. 빠르게.

(2) 느린 선택기: 클래스 선택기

　$('.className')의 성능은 브라우저에 따라 다릅니다.

　 Firefox, Safari, Chrome 및 Opera 브라우저에는 모두 getElementByClassName() 기본 메소드가 있으므로 속도가 느리지 않습니다. 그러나 IE5-IE8에서는 이 방법을 배포하지 않았으므로 IE에서는 이 선택기가 상당히 느립니다.

4. 하위 요소와 상위 요소의 관계

<span style="font-size: 15px">$(&#39;.child&#39;, $parent)

$parent.find(&#39;.child&#39;)

$parent.children(&#39;.child&#39;)

$(&#39;#parent > .child&#39;)

$(&#39;#parent .child&#39;)

$(&#39;.child&#39;, $(&#39;#parent&#39;))<br/></span>

(1) $('.child', $parent)·

　이 문장의 의미는 DOM 객체가 주어진 다음 하위 요소를 선택합니다. jQuery는 자동으로 이 명령문을 $.parent.find('child')로 변환합니다.

이로 인해 특정 성능 손실이 발생합니다. 가장 빠른 형태보다 5%-10% 느립니다.

(2) $parent.find('.child')

　가장 빠른 문장입니다. .find() 메소드는 브라우저의 기본 메소드(getElementById, getElementByName, getElementByTagName

등)를 호출하므로 더 빠릅니다.

(3) $parent.children('.child')

이 명령문은 jQuery 내부에서 $.sibling() 및 javascript의 nextSibling() 메소드를 사용하여 노드를 하나씩 탐색합니다. 가장 빠른 형태보다 약 50% 정도 느립니다.

(4) $('#parent > .child')

jQuery는 Sizzle 엔진을 내부적으로 사용하여 다양한 선택기를 처리합니다. Sizzle 엔진의 선택 순서는 오른쪽에서 왼쪽이므로 이 명령문은 .child를 먼저 선택한 다음 상위 요소 #parent를 하나씩 필터링하여 가장 빠른 형식보다 약 70% 느려집니다.

(5) $('#parent .child')

　 이 문장은 이전 문장과 동일합니다. 그러나 이전 버전은 직접 하위 요소만 선택하는 반면, 이번 버전은 다단계 하위 요소를 선택할 수 있어 속도가 느리고,

가장 빠른 형태에 비해 약 77% 정도 느립니다.

(6) $('.child', $('#parent'))

jQuery는 내부적으로 이 명령문을 $('#parent').find('.child ')로 변환합니다. , 이는 가장 빠른 형태보다 23% 느립니다.

　따라서 최선의 선택은 $parent.find('.child')입니다. 게다가 이전 작업에서 $parent가 생성되는 경우가 많기 때문에 jQuery에서는 이를 캐싱하므로 실행 속도를 높이기 위해 추가로 증가시킵니다.

위 내용은 JQ 최적화 방법의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!