가장 효율적인 jQuery 선택기

Question

jQuery에서 가장 효율적인 다음 선택기는 무엇입니까? 아니면 실제적인 차이가 있습니까?

1. input[type=text]
2. [type=text]
물론
3. input:text
4. :text

, 인터프리터가 getElementById()를 사용할 수 있기 때문에 요소에 ID 선택이 가장 좋은 것입니다,하지만 난에 노력하고있어 위 선택자의 일반적인 차이점을 이해하십시오.

Answer 1

빠른 설정은 test case입니다 (속성 이름 선택자에 대해 필요한 인용 부호를 추가했음을 유의하십시오). 첫 번째 방법이 가장 빠를 것 같습니다. 이는 실제로 다른 사람이 범용 * 선택기를 암시하므로 [type='text']이 뒤 따르고 마지막 위치는 :text입니다.

실제로 차이는 너무 작아서 선택하는 것이 중요하지 않습니다. 여기

은 (편집 - 내가 질문에 업데이트 본 후 4 법에 추가 한) 스크린 샷 : 그것은 무너 뜨

Answer 2

을 :

input[type=text] 
// and 
[type=text] 

모두 attribute selectors 있습니까 . 첫 번째 것은 속성 조회가 입력 요소로 이미 좁혀 졌기 때문에 빠릅니다.

input:text 
:text 

jQuery 확장입니다. :text selector docs에서 :

때문에 : 텍스트가 CSS 사양의 jQuery를 확장하지 부분, 쿼리를 사용하여 : 텍스트가 기본 DOM querySelectorAll() 방법에 의해 제공되는 성능 향상을 이용할 수 없습니다. 최신 브라우저의 성능을 높이려면 대신 [type = "text"] 을 사용하십시오.

그래서 이러한 선택기는 더 느립니다 (반면 입력 요소로 좁히는 것이 여기에서 더 빠름).