문제

선택자를 어떻게 표현하느냐에 따라 성능이 크게 달라집니다.예를 들어, 정확히 동일한 요소를 선택하는 다음 2개의 선택기를 살펴보세요.

A) someTableRow.find("td.someColumnClass").find("span.editMode").find("input")
B) someTableRow.find("td.someColumnClass span.editMode input")

호출이 1개뿐이므로 B)가 더 빠를 것으로 예상하지만 실제로는 A)가 약 8배 더 빠르게 실행되는 것으로 나타났습니다.이유는 모르겠지만 통찰력 있는 사람이 있나요?감사해요

도움이 되었습니까?

해결책

최소한 jQuery 1.3 (예 : 지글 지글을 추가하면)을 사용한다고 가정하면,보고있는 성능은 DOM이 가로 지르는 변화 때문입니다. 에서 여기:

jQuery 1.2.6까지, 선택기 엔진은 "상단 아래로"(또는 "왼쪽에서 오른쪽") 방식으로 작동했습니다. jQuery 1.3.x (예 : 찌는 듯이 덥다, jQuery가 포함 된 jQuery가 DOM을 쿼리하기위한 "하부 위로"(또는 "오른쪽에서 왼쪽") 접근 방식을 도입했습니다.

두 번째 예에서 ("td.someColumnClass span.editMode input"), Sizzle은 효과적으로 다음을 수행합니다.

  1. 모든 것을 가져라 input 내부의 요소 someTableRow
  2. 각각 input 발견 된 요소는 조상 트리를 가로 지르십시오 span 요소 class="editMode". 제거하다 input 이 조상이없는 요소
  3. 각각 span.editMode 발견 된 요소는 조상 트리를 가로 지르십시오 td 요소 class="someColumnClass". 제거하다 input 이 조상이없는 요소

그러나 첫 번째 예에서는 각 통화에 따라 각 단계를 명시 적으로 자격을 갖추고 있습니다. find(), 컨텍스트를 정의하고 횡단 아래에 거기에서. "하향식"접근 방식을 시행하고 있습니다. 각 단계에서 컨텍스트를 통과하는 것과 같습니다. 일반적으로 성능 부스터로 간주됩니다:

$('input', $('span.editMode', $('td.someColumnClass', someTableRow)))

다른 팁

검색의 컨텍스트를 줄이고 있기 때문입니다.

사례 B의 경우 모든 DOM 요소를 검색하여 기준을 충족하는지 확인해야합니다.

AS의 경우, IS는 "TD.Somecolumnclass"가 아닌 것을 무시하기로 결정할 수 있습니다. 그러면 DOM의 하위 집합을 가져 와서 "span.editMode"에없는 것을 무시할 수 있습니다. 따라서 지금 "입력"을 찾기 위해 검색 할 수있는 요소 세트가 훨씬 더 작습니다.

A는 더 많은 전화이지만 간단합니다. B는 하나의 전화이지만 더 복잡합니다. 이 경우 통화의 복잡성은 통화의 수를 크게 넘어냅니다.

jQuery가 SELCTORS를 처리하는 방식은 내 경험에서 CSS와 약간 다릅니다.

Josh가 지적한 것처럼 검색의 컨텍스트를 줄이는 것이 중요합니다.

두 매개 변수 선택기를 실제로 사용하는 것이 정말 빠릅니다

이것은 속도를 어떻게 비교합니까?

당신은 여기에 모든 Vars가 필요하지는 않습니다. 단지 내가하고있는 일을 명확히하기 위해

var columnClasses = $('.someColumnClass');
var tableCell = $('td', columnclasses);
var editMode = $('.editmode', tableCell);
var spanInside = $('span', editMode);
var inputFinally = $('input', spanInside);

친절,

단

나는 jQuery 선택기 성능에 대한 연구를 직접 연구했습니다. 큰 문제는 Internet Explorer의 클래스 이름에 따른 조회입니다. IE는 GetElementsByClassName을 지원하지 않습니다. 따라서 모든 DOM 요소를 반복하여 jQuery 및 기타 프레임 워크 "Reimplement"로 JavaScript로 "Remement". 다음 분석 블로그를 확인하십시오 jQuery 선택기 성능

여기에 선택기 성능에 관한 정말 흥미로운 기사가 ​​있습니다. http://blogs.atlassian.com/developer/2009/08/jquery_bondage.html

여기에서 저자는 함수가 평가되는 횟수를 보여주는 "바인드" jQuery 확장을 보여줍니다.

라이센스 : CC-BY-SA ~와 함께 속성
제휴하지 않습니다 StackOverflow
scroll top