CSS 객체 모델(CSSOM)
CSSOM란 HTML 대신 CSS가 대상인 DOM이라고 생각하면 된다.
JavaScript에서 DOM에 접근하여 HTML을 수정할 수 있듯이 CSSOM은 CSS 객체 모델로 JavaScript로 CSS를 동적으로 조작할 수 있다.
브라우저 렌더링 과정
- HTML 문서를 DOM Tree 자료구조를 만들기 위해 Token 형태로 분해 후 해당 Token이 요청하는 바를 실행하고 파싱 결과인 DOM Tree를 만든다
- DOM Tree가 만들어진 후 CSS 파일도 파싱 후 트리구조의 자료구조인 CSSOM을 만든다
- DOM과 CSSOM을 합쳐 Render Tree를 만든다
- js script에 대한 요청, 파싱, 실행을 통해 Render Tree를 조작해 새로운 Render tree를 만든다.
- Layout 단계를 거쳐 노드들의 적절한 크기와 위치를 조정
- Paint 단계, 노드들의 컨텐츠들을 브라우저에 픽셀 단위로 그려 띄운다
그렇다면 이해가 가는 것이 있다...
가끔 네트워크 연결이 불안정할 때 자주 마주하는 HTML만 존재하는 웹페이지의 민낯...
렌더링 과정에서 CSS 파일에 대한 요청은 DOM이 먼저 생성된 후에 전송되게끔 설계되어있기 때문이었다는 것.
<head> 태그에 보통 css 파일을 명시해야하는 이유는 브라우저의 설계 원칙을 지키기 위해서임을 알 수 있다. 만약 <body> 태그에 작성하게 되면 DOM 생성을 멈추고 CSSOM을 만드는 과정을 진행한다고 한다. 해당 요소는 Render Blocking 요소를 발생시키는 주요 원인이 된다고...
질문이 생겼다
왜 CSS도 트리 구조여야 하는가?에 대한 팀원의 질문에 처음 고민하기 시작했다.
처음 추측한 이유는 CSS도 결국 DOM Tree 구조에 맞게 적용될 수 있어야하기 때문에 그렇게 된 것 아닐까? 라는 것이었다.
찾아보니 해당 이유도 맞다. 추가적으로 알게 된 것은 CSS의 계층적 특성 또한 이유가 된다는 것이다.
CSS는 부모 요소의 스타일이 자식 요소에 상속될 수도 있고, 각 요소의 DOM 구조상 위치에 따라 우선순위가 달라지기도 한다.
이는 CSS의 cascading 룰이 적용되어 스타일이 세분화되기 때문이다.
이러한 룰을 적용시키기 위해서는 부모 자식간의 관계를 나타내야하기 때문에 CSS도 트리 구조가 가장 적합하다는 것!
오늘의 생각
지금까지 공부하는 방법이 잘못 되었던게 아닐까... 고민하게 되는 날이었다.
내가 지금까지 공부해왔던 내용들을 내가 스스로 엮어낼 수 있어야 진짜 공부가 된거구나 라는 생각을 했다.
지금이라도 조금씩 더 스스로 생각을 많이 해보고 설명도 해봐야할 것 같다.
