브라우저는 DOM을 구축하면서 문서의 head에 있는 외부 CSS 스타일시트를 참조하는 link 태그를 만납니다. 페이지를 렌더링하는 데 이 자원이 필요할 것이라고 판단한 브라우저는 즉각 자원을 요청하고, 요청의 결과로 아래의 콘텐츠가 돌아옵니다.

왜 CSSOM을 트리 구조로 구성하는 걸까요? 페이지에 있는 어떤 객체의 최종 스타일을 계산할 때, 브라우저는 처음에 가장 일반적인 규칙을 노드에 적용(예를 들어, body의 자식 엘리먼트에게 body의 모든 스타일을 적용)한 다음, 더 구체화된 하위 스타일 규칙을 반영하여 계산한 스타일을 재귀적으로 노드에 재적용합니다. 즉, "cascade down" 방식으로 규칙을 적용하기 때문에 CSSOM을 트리 구조로 만듭니다.

좀 더 구체화하기 위해서 위에 있는 CSSOM 트리를 살펴봅시다. body 태그 안에 있는 span 태그가 가지고 있는 텍스트의 폰트 사이즈는 16 픽셀이고 색상은 빨간색입니다. font-size 지시자를 body에서 span까지 하향식으로 적용하기 때문입니다. 하지만 span 태그가 p 태그의 자식이라면, 브라우저는 이를 화면에 표시하지 않을 것입니다.

그리고 위에 있는 트리는 완전한 CSSOM 트리가 아니라는 사실을 명심하십시오. 기본 스타일을 덮어쓰기 위해서 스타일시트에 작성한 스타일만을 보여주고 있을 뿐입니다. 모든 브라우저는 사용자가 아무런 스타일도 작성하지 않았을 때 볼 수 있는 "user agent styles"라는 기본 스타일 세트를 제공합니다. 사용자가 작성하는 스타일은 간단하게 이런 기본 스타일을 덮어씁니다(예, 기본 IE 스타일). 크롬 개발자 도구에서 "computed styles"을 검사하다가 자신이 지정하지 않은 스타일이 어떻게 적용되어 있는 건지 궁금한 적이 있었다면 여러분은 지금 그 궁금증을 해결했습니다.

CSS 처리 시간은 얼마나 걸릴까요? 크롬 개발자 도구의 타임라인을 기록하고 "Recalculate Style" 이벤트를 보십시오. DOM을 해석할 때와 다르게 타임라인에 "Parse CSS" 과정을 따로 구분해서 볼 수 없습니다. 대신 CSS 해석과 CSSOM 트리 구축 시간에 계산한 스타일을 재귀적으로 적용하는 시간을 더해서 하나의 이벤트로 묶어서 보여줍니다.