[JQUERY] jQuery 단일 선택기 vs .find ()

jQuery 단일 선택기 vs .find ()

해결법

1. ---

   1.귀하의 질문에 대한 답변은 다음과 같습니다. 예.

   귀하의 질문에 대한 답변은 다음과 같습니다. 예.

   코드가 느리지 않으면 성능 차이에 대해 걱정하지 마십시오. 그렇다면 병목 현상을 결정하기 위해 프로파일 러를 사용하십시오.

   분석 관점에서 :

   $(".div1 h2, div1 h3")
   

   jQuery가 querySelectorAll (존재하는 경우)을 통해 파이프를 파이프하고 네이티브 코드가 아닌 코드보다 빠르게 작동 할 때 더 빨라야합니다. 또한 추가 함수 호출에도 저장됩니다.

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

   .div1에서 다른 기능을 체인화 할 계획이라면 더 좋습니다.

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

2. ---

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

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

   선택기가 더 빠릅니다

   (참고 : 임의의 HTML을 구성하여 페이지의 요소만이 아니 었습니다)

3. ---

   3.사실 .find ()는 더 빨리 가능합니다.

   사실 .find ()는 더 빨리 가능합니다.

   선택기는 여러 요소를 선택하려고 할 때 찾아내는 것처럼 보입니다. 그러나 $ .find를 사용하거나 자손을 캐시하면 훨씬 더 빠르게 볼 수 있습니다. http://jsperf.com/selector-vs-find-AGAIN/11.

   또한 성능이 중요하지 않은 성능에 따라 다릅니다. 스마트 폰의 세계에서 배터리 수명은 왕입니다.

4. ---

   4.방금이 답변을 발견하고 여기에 몇 가지 숫자를 추가하고 싶습니다. 누군가가 도움이되고 호기심을 찾을 수 있습니다. 내 경우에 나는 고유 한 요소를 위해 가장 빠른 jQuery 선택기를 찾았습니다. 나는 이유없이 ID를 추가하기를 좋아하지 않으므로 ID가없는 요소를 선택하는 방법을 찾았습니다.

   방금이 답변을 발견하고 여기에 몇 가지 숫자를 추가하고 싶습니다. 누군가가 도움이되고 호기심을 찾을 수 있습니다. 내 경우에 나는 고유 한 요소를 위해 가장 빠른 jQuery 선택기를 찾았습니다. 나는 이유없이 ID를 추가하기를 좋아하지 않으므로 ID가없는 요소를 선택하는 방법을 찾았습니다.

   내 작은 연구에서 나는 jQuery에 대한 멋진 선택기 프로파일러를 사용했습니다. 그리고 Profiler의 라이브러리 코드를 추가 한 후 Chrome Console에서 직접 해고 된 코드가 있습니다.

   $.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
   

   가장 느린 선택기는이 차트의 맨 위에 있습니다. 가장 빠른 것들은 바닥에 있습니다. 셀렉터가 is id i.e. $ ( '# main-menu')를 통해 나를 위해 나를 위해 놀랍게도 나는 단일 클래스 선택기를 발견했습니다. .top-bar와 .sticky. 건배!

from https://stackoverflow.com/questions/6230266/jquery-single-selector-vs-find by cc-by-sa and MIT license