CSSOM

최적의 솔루션은 HTML 사양을 따르고 스타일 시트를 문서 HEAD에 로드하는 것

HTML 스펙은 명확하게 스타일이 페이지의 HEAD에 포함시킬 것을 기술

JavaScript에서 CSS를 조작할 수 있는 API 집합

HTML 대신 CSS가 대상인 DOM

사용자가 CSS 스타일을 동적으로 읽고 수정할 수 있는 방법

돔트리는 파싱 중에 태그를 발견할 때마다 순차적으로 구성할 수 있지만, cssom트리는 css를 모두 해석해야 구성할 수 있다

즉, cssom 트리가 구성되지 않으면 렌더트리를 만들지 못하고 렌더링이 차단된다

이러한 이유로 css는 렌더링 차단 리소스라고 하며, 렌더링이 차단되지 않도록 css는 항상 html 문서 최상단의 head태그 아래에 배치

최초 렌더링에 걸리는 시간을 최적화하려면 클라이언트에 css를 최대한 빠르게 다운로드해야

js 파서가 script 태그를 만나면 html fetch를 중단하고 css 파싱을 실행한다. 자바스크립트가 파서 블로킹을 일으키는 것을 피하기 위해 async나 defer 속성으로 비동기적으로 로드할 수 있다