Seonglae ChoCSS Object Model
최적의 솔루션은 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 속성으로 비동기적으로 로드할 수 있다
CSS 객체 모델 (CSSOM)
CSS Object Model은 JavaScript에서 CSS를 조작할 수 있는 API 집합입니다. HTML 대신 CSS가 대상인 DOM이라고 생각할 수 있으며, 사용자가 CSS 스타일을 동적으로 읽고 수정할 수 있는 방법입니다.
https://developer.mozilla.org/ko/docs/Web/API/CSS_Object_Model
Simple CSS Hack to Reduce Page Load Time
Technofunnel presents another article to help guide you on how to reduce page load time by applying a simple hack in HTML. Everyone wants their page to load faster. This also helps provide better SEO performance. Let's see how can we reduce page load time by making a few changes in CSS.
https://javascript.plainenglish.io/simple-css-hack-to-reduce-page-load-time-366f7aaaa3be
[스압/데이터주의] 웹 최적화 방식 모음 - 2. 파싱 및 렌더링 트리
이 파트의 핵심은 파싱의 병렬성과 렌더링에 미치는 영향이다. 크게 배치순서를 바꾸는 것과 제한, 기타 효율적 활용하는 방안으로 나눌 수 있다. 2.1.1 CSS를 상단에 배치 개요 분류: CSS HEAD에 스타일 시트를 넣으면 페이지가 점진적으로 렌더링 될 수 있어 좋다. CSSOM 트리는 CSS를 모두 해석해야 구성되고, 구성되지 않으면 렌더링이 차단되기 때문이다.
![[스압/데이터주의] 웹 최적화 방식 모음 - 2. 파싱 및 렌더링 트리](https://www.notion.so/image/https%3A%2F%2Fblack7375.tistory.com%2Ffavicon.ico?table=block&id=fd1694d2-b465-4265-a6a7-5c6f292ea79b&cache=v2){kind=small}
https://black7375.tistory.com/74
![[스압/데이터주의] 웹 최적화 방식 모음 - 2. 파싱 및 렌더링 트리](https://www.notion.so/image/https%3A%2F%2Fimg1.daumcdn.net%2Fthumb%2FR800x0%2F%3Fscode%3Dmtistory2%26fname%3Dhttps%253A%252F%252Fblog.kakaocdn.net%252Fdn%252FdvVV3t%252FbtqW8FMg6E7%252F2ODjd3FRx3jPYgs8KHkV61%252Fimg.png?table=block&id=fd1694d2-b465-4265-a6a7-5c6f292ea79b&cache=v2)