jQuery 선택기 성능을 향상시키는 좋은 방법?

jQuery 선택기 성능을 향상시키는 좋은 방법?

---

jQuery 호출의 선택기 성능을 향상시킬 수있는 방법을 찾고 있습니다. 구체적으로 다음과 같습니다.

인가 $("div.myclass")보다 빠른$(".myclass")

그럴 수도 있다고 생각하지만 jQuery가 먼저 태그 이름으로 검색을 제한 할만큼 똑똑한 지 모르겠습니다. 누구든지 최상의 성능을 위해 jQuery 선택기 문자열을 공식화하는 방법에 대한 아이디어가 있습니까?

---

태그 이름으로 필터링하는 것이 클래스 이름으로 필터링하는 것 보다 훨씬 빠르다는 것은 의심의 여지가 없습니다 .

이는 모든 브라우저가 getElementsByTagName의 경우와 마찬가지로 기본적으로 getElementsByClassName을 구현할 때까지 해당됩니다.

---

경우에 따라 컨텍스트를 제한하여 쿼리 속도를 높일 수 있습니다. 요소 참조가있는 경우 두 번째 인수로 전달하여 쿼리 범위를 제한 할 수 있습니다.

$(".myclass", a_DOM_element);

보다 빠르다

$(".myclass");

이미 a_DOM_element가 있고 전체 문서보다 훨씬 작은 경우.

---

Reid가 위에서 언급했듯이 jQuery는 아래에서 위로 작동합니다. 이기는 하지만

즉 $('#foo bar div'),$('bar div #foo')

요점은 그것이 아니다. #fooID가 고유해야하므로 선택자 앞에 아무것도 넣지 않았 으면합니다 .

요점은 :

• ID가있는 요소에서 항목을 하위 선택하는 경우 나중에 먼저 선택한 다음 .find, .children등 을 사용합니다 .$('#foo').find('div')
• 선택기의 당신의 왼쪽 (첫 번째) 부분은 수 가장 오른쪽 (마지막) 부분에 덜 효율적으로 확장 할 수 있어야 가장 효율적으로 - 의미를 당신이 찾고 있는지에 ID 메이크업이없는 경우 $('div.common[slow*=Search] input.rare')가 아닌 $('div.rare input.common[name*=slowSearch]')-이 ISN '이후 t 항상 적용 가능 그에 따라 분할하여 선택자 순서를 강제하십시오.

---

더 빠른 것을 완전히 이해하려면 CSS 파서가 어떻게 작동하는지 이해해야합니다.

전달한 선택기는 RegExp를 사용하여 인식 가능한 부분으로 분할 된 다음 하나씩 처리됩니다.

ID 및 TagName과 같은 일부 선택기는 더 빠른 브라우저의 기본 구현을 사용합니다. 클래스 및 속성과 같은 다른 것들은 개별적으로 프로그래밍되므로 훨씬 느리므로 선택한 요소를 반복하고 각각의 모든 클래스 이름을 확인해야합니다.

그래서 네 질문에 대답하십시오.

$ ( 'tag.class')는 $ ( '. class')보다 빠릅니다. 왜? 첫 번째 경우 jQuery는 기본 브라우저 구현을 사용하여 필요한 요소로만 선택을 필터링합니다. 그런 다음 요청한대로 필터링하는 느린 .class 구현을 시작합니다.

두 번째 경우 jQuery는 클래스를 잡아서 모든 요소를 ​​필터링하는 방법을 사용합니다.

모든 자바 스크립트 라이브러리가이를 기반으로하기 때문에 이것은 jQuery보다 더 많이 퍼집니다. 유일한 다른 옵션은 xPath를 사용하는 것이지만 현재 모든 브라우저에서 잘 지원되지는 않습니다.

---

다음은 jQuery 선택기의 성능을 높이는 방법입니다.

• 가능할 때마다 #id로 선택 ( 성능 테스트 결과 ~ 250 더 빠름)
• 선택 범위 지정 ( $('.select', this))

---

웹 앱의 99 %, 심지어 ajax가 많은 앱에서도 웹 서버의 연결 속도와 응답이 자바 스크립트가 아닌 앱의 성능을 주도 할 것이라는 점을 추가하겠습니다. 의도적으로 느린 코드를 작성해야한다는 말이나 일반적으로 다른 것보다 빠를 가능성이있는 일을 인식하는 것이 좋지 않다는 말은 아닙니다.

하지만 아직 실제로 존재하지 않는 문제를 해결하려고하는지 또는 가까운 장래에 변경 될 수있는 문제에 대해 최적화하고 있는지 궁금합니다 (예 : 더 많은 사람들이 getElementsByClassName()기능 을 지원하는 브라우저를 사용하기 시작하면 최적화 된 코드가 실제로 느리게 실행되도록합니다.

---

성능 정보를 찾을 수있는 또 다른 곳은 Hugo Vidal Teixeira의 선택기 성능 분석 페이지입니다.

http://www.componenthouse.com/article-19

이를 통해 ID 별 선택자, 클래스 별 선택자 및 태그 이름 접두사에 따른 선택기의 속도를 잘 확인할 수 있습니다.

ID 별 가장 빠른 선택자는 $ ( "# id")입니다.

클래스 별 가장 빠른 선택자는 $ ( 'tag.class')입니다.

따라서 태그로 접두사는 클래스별로 선택할 때만 도움이되었습니다!

---

나는 jQuery 메일 링리스트의 일부에 있었고 거기에서 읽은 것을 보면 태그 이름과 클래스 이름으로 필터링 할 가능성이 큽니다 (또는 더 빠르다면 그 반대도 마찬가지입니다). 그들은 속도에 집착하고 어떤 것을 사용하여 약간의 성능을 얻습니다.

그 선택기를 초당 수천 번 실행하지 않는 한 어쨌든 그것에 대해 너무 걱정하지 않을 것입니다.

정말 걱정된다면 벤치마킹을 해보고 어느 것이 더 빠른지 확인하십시오.

---

Oliver Steele의 Sequentially 라이브러리를 사용하여 한 번에 모두가 아닌 시간에 따라 메서드를 호출하는 것을 고려하십시오.

http://osteele.com/sources/javascript/sequentially/

"결국"메서드는 초기 호출에서 일정 시간이 지난 후에 메서드를 호출하는 데 도움이됩니다. "순차적"방법을 사용하면 일정 기간 동안 여러 작업을 대기열에 넣을 수 있습니다.

매우 유용합니다!

---

좋은 팁 질문 난으로부터 질문 : 사용 표준 CSS 선택기 가능한. 이를 통해 jQuery는 Selectors API 를 사용할 수 있습니다 . John Resig가 수행 한 테스트 에 따르면 이로 인해 선택기의 성능이 거의 네이티브에 가깝습니다. 같은 기능 :has()과는 :contains()피해야한다.

내 연구에서 Selectors API에 대한 지원은 jQuery 1.2.7, Firefox 3.1, IE 8, Opera 10, Safari 3.1과 함께 도입되었습니다.

---

내가 착각하지 않는다면 jQuery는 상향식 엔진이기도하다. 즉 $('#foo bar div'), $('bar div #foo'). 예를 들어 는 페이지 $('#foo a')의 모든 a요소를 살펴보고 상위 요소가 있는지 확인합니다 #foo. 이로 인해이 선택기는 매우 비효율적입니다.

Resig may have already optimized for this scenario (it wouldn't surprise me if he did - I believe he did in his Sizzle engine, but I am not 100% certain.)

---

I believe that selecting by ID first is always faster:

$("#myform th").css("color","red");

should be faster than

$("th").css("color","red");

However, I wonder how much chaining helps when starting with the ID? Is this

$("#myform").find("th").css("color","red")
.end().find("td").css("color","blue");

any faster than this?

$("#myform th").css("color","red");
$("#myform td").css("color","blue");

참고URL : https://stackoverflow.com/questions/46214/good-ways-to-improve-jquery-selector-performance