jquery class-selector vs qualified class-selector

Question

현재 webperformance에 대한 나의 bachelorthesis를 쓰고 있으며 기대하지 않은 결과가 나타났습니다.

Paul Irish 또는 jquery 자체가 권장하기 때문에 항상 id에서 내려 오는 것이 가장 좋습니다.

http://learn.jquery.com/performance/optimize-selectors/

은 그래서는 $은 ('. 클래스') 느린 것을 예상 한 것보다 $ ('# ID가 클래스') 또는 $ ('# 아이디'). 찾기 ('. 클래스') .

나는 jsperf에 그것을 테스트하고 꽤 intersting 결과에 온 :

http://jsperf.com/selektor/2

Results http://fs1.directupload.net/images/141230/5euuefin.png

그것은 정말 브라우저에 의존하는 것 같아,하지만 난 정말 $를 기대하지 않았다 ('.class')를 사용하면 Chrome에서 특히 ID를 기반으로하는 사용자보다 더 빠르게 수행 할 수 있습니다.

나에게 맞는 것은 다음과 같은 설명이지만, 그 차이가 브라우저에 비해 큰 이유는 무엇입니까? 엔진이 그렇게 다른가요?

차이점은 단일 클래스 또는 ID 조회를 사용할 때 querySelector보다 빠른 getElementsByClassName 및 getElementById를 사용할 수 있다는 것입니다. 최신 브라우저에서는 10 배 빠릅니다.

출처 : http://jsperf.com/jquery-class-vs-tag-qualfied-class-selector/38

그래서 당신의 의견은 그것에 무엇인가? 귀하의 질문에 유일한 진짜 질문에 대한 대답에서

Answer 1

". 나에게 의미가 다음과 같은 설명이지만, 왜 그 브라우저에 따라 이렇게 큰 차이가 이 엔진은 너무 다른 있습니까?"

대답은 물론 "예"입니다. 이 세 브라우저는 모두 서로 다른 코드베이스를 기반으로하며 코딩 방법이 다르면 속도가 크게 달라집니다. 예 : "3 코더에게 해결책을 물어 보면 3 가지 솔루션을 얻게 될 것입니다."

가장 중요한 점은 클래스 만 검색은 실제로는 현대식 브라우저에서 매우 빠르다는 것과 반대의 제안입니다. 추가 검사 (ID 선택기조차도)를 추가하면 클래스 검색 속도가 느려집니다. 이는 대부분의 브라우저가 클래스 대 요소의 캐시를 유지한다는 것을 의미합니다. 이는 아마도 더 빠른 CSS 처리를 위해 의도되었지만 부작용은 빠른 클래스 기반 검색이기도합니다.