2011-10-02 5 views
19

나는이 빨리 될 것이라고 가정 것 :CSS : #id .class VS .class 성능. 어떤게 더 좋아?

#dialog .videoContainer { width:100px; } 

보다 : 물론

.videoContainer { width:100px; } 

을 첫 번째 예에서 .videoContainer#dialog 태그에서 스타일 것이라고 무시.

+0

내가 비록 잘 모르겠어요 ... 당신은 거꾸로 생각 :

다음은 읽어야 전문가에 의한 적절한 대답. '# dialog'가 필요 없다면 나는 그것을 사용하지 않을 것입니다. –

+0

@Drew - 저는 ID를 파싱하는 것이 가장 빠르다고 가정합니다. – Ryan

+3

Google은 선택기를 작성하는 데 유용한 팁을 제공합니다. http://code.google.com/speed/page-speed/docs/rendering.html#UseEfficientCSSSelectors – Pat

답변

23

CSS 셀렉터는 matched from right to left입니다.

그러므로 .videoContainer#dialog에 대한 테스트를 빠뜨리므로 #dialog .videoContainer보다 "빠름"이어야합니다.

그러나이 내용은 전혀 관련이 없습니다. 차이점을 눈치 채지 못할 것입니다. 보통 크기의 페이지의 경우, 우리가 이야기하는 시간은 존재하지 않을 정도로 중요하지 않습니다. Why do browsers match CSS selectors from right to left?