자식 선택자child selector는 "table td tr.className"과 같이 노드의 계층 구조를 포함하도록 작성된 CSS 선택자를 말합니다. 이러한 자식 선택자가 그냥 단순하게 클래스 이름만 쓰는 것보다 더 느릴까요?

Jim Barraud씨는 "느리다"라고 했는데, Jim 씨의 글을 읽은 Jon Sykes씨는 아무래도 이를 데이터로 증명해야 마음이 편했나봅니다.

그의 결론을 볼까요?

자식 선택자가 주요한 성능 문제라는 것은 확실합니다.

맞는 말이긴 하지만, 누군가 말한 그대로 믿기보다는 일종의 증명을 하고 싶었습니다. 그래서 지난 이틀간 이 문제를 재연하기 위한 두 가지 접근 방식을 시도해보았습니다.

첫번째는 벤치마킹으로서는 근본적인 문제가 있는 워낙 쓸모없는 아이디어였습니다.

그래서 저는 새로운 접근방식을 취했습니다. 이 방식은 몇몇 유효하고 꽤 흥미로운 결과를 반환하는 듯 보였습니다. 특히, Safari 와 Firefox 3와 관련해 이들이 자식 선택자와 성능에 어떻게 반응하는지에 대해서 말이죠.

테스트 결과는 IE6, IE7, Safari3 에서 직접적인 클래스 선언보다 자식 선택자를 사용하는 것이 느리다고 말합니다. Safari3가 자식 선택자에 가장 많은 영향을 받았습니다. Firefox는 약간의 영향을, 그리고 Firefox3는 전혀 영향을 받지 않는 것처럼 보였습니다.

이 실험은 매우 극단적입니다. 보통은 한 페이지에 20,000 개나 되는 클래스 선언을 정의하거나 그들 모두가 4단계의 자식 선택자일리는 없습니다.

사용자 삽입 이미지

(주 : child selector, child 셀렉터, 자식 셀렉터, 자식 선택자 등의 많은 명칭을 놓고 고민했습니다. 아직 널리 쓰이는 말이 없기에 이왕이면 우리말로 바꾸려는 노력이 필요하지 않을까 생각해서 자식 선택자라고 번역했습니다. 똑같은 의미의 '자식'을 의미하는 자식 노드라는 말이 이미 쓰이고 있기 때문에 그렇게 써도 괜찮지 않을까라고 생각해서 선택한 어휘입니다만 어색하기는 하네요 ^^a)

from CSS Child Selector Performance on Ajaxian
Posted by 행복한고니 트랙백 0 : 댓글 4

티스토리 툴바