CSSOM Tree란?
CSS 내용을 Parsing 한 것을 구조화 한 것이 CSSOM Tree라고 한다.
CSS 렌더링 과정
HTML을 Parsing하면서 <head>태그를 만나게 된다. 이때, <head>태그에는 CSS파일을 요청하는 태그인 <link>태그가 있다. <link>태그를 만나게 된다면,CSS파일을 요청하고, CSS 파일을 응답받게 된다.
- CSS 파일을 받게 된다면, 바이트문자로 받게 된다. 이때 해당 바이트 문자를 ASCII문자로 변경해준다.
- ASCII문자를 토큰으로 변경해준다
- 토큰으로 변경된 것을 Node로 변경해준다
- Node로 변경된 것을 이용해서 CSSOM Tree를 만들어준다.
CSSOM Tree를 만드는 이유
Style이 겹치면 우선순위가 높은 것에 적용된다
특정 Style을 적용하지 않은 경우 부모의 Style을 그대로 받아서 적용한다
위와 같은 경우 처럼 아래로 갈 수록 구체적으로 Style이 적용된다.
그래서 CSSOM은 하향식 구조를 갖추기 때문에 CSSOM이 필요하다
CSSOM은 Cache가 가능한 것인가?
캐싱이 가능하다
HTTP 캐싱 매커니즘을 사용해서 CSS 파일을 캐싱을 할 수 있다.
HTTP 캐싱 메커니즘이란?
다운로드한 리소스를 다시 사용하는 방법이다.
Web Server에서 Client에 보내는 HTTP응답 메세지에 캐시 가능한 리소스의 캐시메세지를 포함시킨다.
이렇게 하면, Client는 해당 HTTP응답 메세지의 헤더를 보고 이전에 다운로드한 리소스를 다시 가져오지 않고 사용할 수 있게 된다.
주니어 프론트엔드 개발자 입니다