CSSOM (CSS Object Model)은 JavaScript에서 CSS를 조작할 수 있는 API 집합 HTML 대신 CSS가 대상인 DOM이라고 생각할 수 있으며, 사용자가 CSS 스타일을 동적으로 읽고 수정할 수 있는 방법입니다. MDN
HTML을 파싱하다 CSS링크를 만나면, CSS파일을 받와서 CSS파일은 파싱과정을 거쳐 역시 Tree형태의 CSSOM으로 만들어진다.
💥 CSSOM에는 우리가 정의한 스타일 뿐 아니라 브라우저에서 기본적으로 설정된 모든 속성 값들이 cascading rule
에 의해 정의되어 있는데 이것을 computed styles
라고한다.
부모인 html에서 font size를 16px로 지정하면
cascading rule
에 의해 body, section h1등 모든태그의 font size가 16px이 된다.
CSSOM에는 이렇게 계산된 모든 스타일에 관련된 속성들이 포함되어 있다
다음 DOM과 CSSOM을 합해서 사용자에게 최종적으로 브라우저에 표기될 것들만 render tree로 만들어진다 (DOM + CSSOM = Render Tree)
❗ HTML을 parsing 하는 도중 link라는 태그를 만나게 되는 경우 일반적으로 CSS 자체로는 HTML,DOM 구조를 변경시킬 수 없기 때문에 HTML 파싱을 block 하지 않는다.
❗ HTML을 parsing 하면서 DOM 트리를 만들다가 link 태그에 외부 css 파일이 있으면 다운로딩 요청만 해놓고 계속 DOM트리를 만든다.