jQuery 단일 선택기 대 .find ()

jQuery 단일 선택기 대 .find ()

---

성능 관점으로 사용하는 것이 더 좋습니다.

$(".div1 h2, .div1 h3")

또는

$(".div1").find("h2, h3")

---

귀하의 질문에 대한 대답은 예입니다.

코드가 느린 경우가 아니면 성능 차이에 대해 걱정하지 마십시오 . 그렇다면 프로파일 러를 사용하여 병목 현상을 확인하십시오.

분석 관점에서 :

$(".div1 h2, div1 h3")

jQuery가 파이프를 통과하고 querySelectorAll(존재하는 경우) 네이티브 코드가 네이티브가 아닌 코드보다 빠르게 실행되므로 더 빠릅니다. 또한 추가 함수 호출을 절약 할 수 있습니다.

$(".div1").find("h2, h3")

에 다른 기능을 연결할 계획이라면 더 좋습니다 .div1.

$(".div1").find("h2, h3").addClass('foo').end().show();

---

http://jsperf.com/selector-vs-find-again

선택기가 더 빠름

(참고 : 페이지의 해당 요소가 아니기 때문에 임의의 html로 구성)

---

실제로 .find () 는 더 빠를 수 있습니다.

선택자는 여러 요소를 선택하려고 할 때 더 빨리 찾는 것 같습니다. 그러나 $ .find를 사용하거나 하위 항목을 캐시하는 경우 훨씬 더 빠릅니다. http://jsperf.com/selector-vs-find-again/11

나는 또한 성능이 중요하지 않다는 점에 대해 다른 것을 간청합니다. 이 스마트 폰 세상에서 배터리 수명이 가장 중요합니다.

---

나는 방금이 답변을 찾았고 여기에 숫자를 추가하고 싶습니다. 누군가가 도움이되고 호기심을 느낄 수 있습니다. 제 경우에는 jQuery고유 한 요소에 대한 가장 빠른 선택기를 찾았습니다 . 이유없이 ID를 추가하고 싶지 않아서 ID가없는 요소를 선택하는 방법을 찾았습니다.

내 작은 연구 에서 jQuery에 대한 멋진 선택기 프로파일 러 를 사용했습니다 . 프로파일 러의 라이브러리 코드를 추가 한 후 Chrome 콘솔에서 직접 실행 한 코드는 다음과 같습니다.

$.profile.start()
// Lets 
for (i = 0; i < 10000; i++) {

  // ID with class vs. ID with find(class)
  $("#main-menu .top-bar");
  $("#main-menu").find(".top-bar");

  // Class only vs element with class
  $( ".top-bar" );
  $( "nav.top-bar" );

  // Class only vs class-in-class
  $( ".sticky" );
  $( ".contain-to-grid.sticky" );
}
$.profile.done()

결과는 다음과 같습니다.

jQuery profiling started...
Selector                  Count  Total Avg+/-stddev  
#main-menu .top-bar       10000  183ms 0.01ms+/-0.13 
nav.top-bar               10000  182ms 0.01ms+/-0.13 
.contain-to-grid.sti...   10000  178ms 0.01ms+/-0.13 
.top-bar                  10000  116ms 0.01ms+/-0.10 
.sticky                   10000  115ms 0.01ms+/-0.10 
#main-menu                10000  107ms 0.01ms+/-0.10 
undefined

가장 느린 선택기는이 차트의 맨 위에 있습니다. 가장 빠른 것은 맨 아래에 있습니다. 놀랍게도 나를 위해 ID에 의한 선택은 즉 직후 $('#main-menu')나는 하나의 클래스 선택의 예를 발견 .top-bar하고 .sticky. 건배!

참조 URL : https://stackoverflow.com/questions/6230266/jquery-single-selector-vs-find