2009-12-04 4 views
2

어제 Google에서 Firebug 용 Page Speed ​​추가 기능을 발견했습니다. The page 효율적인 CSS 선택기 사용은 과도한 선택기를 사용하지 말 것을 말합니다. 즉, div#foo 대신 #foo을 사용하십시오. 나는 후자가 더 빠를 것이라고 생각했지만 Google은 그렇지 않다는 말을하고 누가 그 반대를 할 것입니까?jQuery 선택기의 성능 특성은 CSS 선택기의 성능 특성과 어떻게 다릅니 까?

jQuery 셀렉터가 동일한 지 궁금합니다. This page에 대한 링크가 있으므로 내가 $("div#foo")을 사용해야한다고 말했고, 그 이유는 선택기가 div 요소와 일치하도록 제한함으로써 속도가 빨라질 것이라고 생각했기 때문입니다. 하지만 CSS 선택기에 대한 Google의 말처럼 $("#foo")을 작성하는 것보다 낫지 않습니까? CSS 대 jQuery 요소가 다른 방식으로 일치하는 작업을 수행하고 $("div#foo")을 사용해야합니까?

+0

브라우저에 따라 다르지 않습니까? I.E .: Google 크롬은 자바 처리에 중점을 둡니다. –

+0

그건 관련이 없습니다. 물론 여러 브라우저가 자바 스크립트를 다른 속도로 실행합니다. 그러나 내가 알고 싶었던 것은 다른 브라우저에서의 실행 속도가 아무런 관련성이없는 경우보다 더 유리한 시간 복잡성이있는 방법이었습니다. – Moss

답변

5

$("#foo")는 ID가 당신이 태그 이름으로 접두사가없는 문서에 고유 더 나은 이후 $("div#foo")

보다.

는 여기에 좋은 링크를 지글 지글 선택기 엔진이 오른쪽에서 왼쪽으로 선택기를 분석

jQuery Performance Rules

+0

감사합니다. 그래서 div # foo 대신 #foo입니다. 이 페이지는 단지 .foo 대신 div.foo를 사용하는 것에 대해서도 언급합니다. CSS에도 적용됩니까? – Moss

1

에게 있습니다.

성능 향상을 위해 가능한 한 ID를 사용하십시오.

1

더 구체적인 선택기 인 Sizzle (jQuery의 선택기 엔진)은 해당 개체를 찾습니다.

이유 : getElementsByTagName은 검색 범위를 좁히는 데 사용됩니다.

하지만 고유 한 ID 이름에는 적용되지 않습니다!

관련 문제