구글 페이지의 속도는 무엇이 이러한 메시지를 의미합니까?

Question

나는 구글 페이지의 속도 Firefox extension 에 몇 페이지에서"효율적인 CSS selectors"그것은 나열된 다양 한 것은 비효율적인에 나 CSS.

하지만 일부의 메시지를 보일 암호는 무엇이 이들(에 대담)의미한다:

div#메뉴 h3.곧은
표 키를 2 자손 선택자 ID 및 지나치게 자격을 갖춘 태그 및 클래스는 지나치게 자격을 갖춘 태그

테이블.데이터 tr:n-아동(2n)td
표 키를 2 자손과 선택기준은 지나치게 자격을 갖춘 태그

테이블.데이터 tr.장애인 td
표 키를 2 자손과 선택기준은 지나치게 자격을 갖춘 태그 및 클래스는 지나치게 자격을 갖춘 태그

나는 가정들이 생각하는 자손이 선택기가 나쁘지만 많은"지나치게 자격을 갖춘"뿐입니다.아마 가지 않을 것을 너무 많은 노력을 고치는 모든 이들(많은)그러나 그것은 좋은 것을 알고 무엇을 구글은 실제로 의미하기!

Answer 1

첫째,내가 결코 사용되는 페이지의 속도는,그러나 메시지지 않는 애매한 경우에 당신을 읽습니다.

div#메뉴 h3.곧은

표 키를 2 자손 선택자 ID 및 지나치게 자격 태그 및 클래스는 지나치게 자격 태그

표 키를 2 자손이 선택기: 얼마나 많은 작은 태그가 있는 포함되지 않은 다른그래 곧?None?CSS 중첩 것에서 완전히 불필요합니다.

ID 지나치게 자격을 갖춘 태그: #메뉴는 필요하지 않습을 붙 div.가장 가능성이 있지 않는 다른 모든 범주에서 태그 id 메뉴가(당신은,그것의 ID!), 그래서 앞에 추가하여 메뉴와 div 에서 중복되어 있습니다.

클래스를 지나치게 자격을 갖춘 태그: .는 곧 필요로하지 않을 붙 h3.가장 가능성이 있지 않는 다른 태그에는 태그 등 빨리 다른 것보다 h3 태그래 앞에 붙.곧 h3 은 불필요하다.

다른 메시지를 따라 이와 유사합니다.

-스티븐

Answer 2

스티븐 그것을 말했습니다.

의 이유로 그들은 신고의 선택기는 CSS 규칙과 일치하는 오른쪽에서 왼쪽으 로 이동합니다.

앞에 붙이는 ID 를 요소(로 div#콘텐츠)는 불필요하기 때문에 브라우저는 이미 일치하는 선택에 의하여 시간에 도달"div".하지만 브라우저입니다 여전히 강요하고 평가합니다.

하위 항목을 선택기가 비싸기 때문에 브라우저는 모두 확인하려면의 인스턴스 돔에서 참조하는 요소 오른쪽 가장 간단한 선택에 대한 모든 가능한 조상입니다.여러 후손이 복합 성능이 저하됩니다.

는 말했다,성능을 달성에서 최적화하는 선택기(에서 대부분의 경우는)무시할 수 있습니다.

Answer 3

그것은 말이 없을 사용하는 이유는 태그 때문에 당신이 제공 그래서 당신은 이미 제한하는 그것이 해야 할 추가입니다.

예를 들어:

div#menu h3.soon .small

여기에는 이유가 없을 시작으로 div 을 것이기 때문에 단지 보기 클래스에서 작은 클래스에서 곧 h3 태그를 아래 html 요소 id 메뉴입니다.

그들은 제안이 같은 뭔가

#menu .soon .small {...}

도

#menu {...}

.soon {...}

.small {...}