브라우저가 css selector를 오른쪽에서 왼쪽으로 읽는 이유

css selector는 오른쪽 부터 왼쪽으로 이동하면서, 해당 규칙에 부합하는 엘리먼트인지 확인한다.

 

#menu ul li a {color: #eee;}

위 코드를 생각해보자,

 

브라우저는 a, li, ul, #menu 순으로 확인할 것이다.

 

그 이유는 selector의 depth가 깊어지고 html파일이 커질 수록, early return의 필요성이 커진다.

오른쪽부터 검사를 해야, 많은 경우에 대해서 우리가 원하는 selector 규칙과 다름을 조기에 인지하여 다음 탐색으로 넘어가기 수월하다.

 

물론 왼쪽부터 읽었을때 좀더 빠르게 찾을 수 있는 경우가 있을 수도 있는데

대부분의 경우 오른쪽 부분부터 매칭하는 것이 좀더 효율적이다.

 

다음과 같은 경우를 생각해보면 이해가 빨라진다

div > div > div > div > span > .a6
div > div > div > div > span > .a5
div > div > div > div > span > .a4
div > div > div > div > span > .a3
div > div > div > div > span > .a2
div > div > div > div > span > .a1

보통 부모가 자식을 여러명 가지고 있는 구조라서, 부모의 요소는 공통적인 부분이 많다.

근데 위의 경우에 대해서 왼쪽부터 오른쪽으로 검사를 진행하게 되면, 자식을 찾는데 너무 오래걸린다...

즉, 어떤 사람을 찾겠다고 그 사람의 조상부터 차례대로 내려오면서 조사하는 꼴이다.