CSSOM(CSS Object Model)이란 무엇인가


  • Javascript의 CSSOM에 대해서 공부하고 정리한 내용입니다.

CSSOM

  • 브라우저에서 DOM을 만들게 되면 우리가 정의한 CSS를 병합해서 CSSOM 이라는 트리를 다시 만들게 된다.

  • 브라우저가 html 파일을 DOM으로 만들었다면 html 파일 안에 있는 스타일 즉, 임베디드된 스타일이나, CSS 파일에 정의한 CSS나, html 태그에 정의한 style 요소들을 비롯해서 이런 스타일이 따로 지정되어 있지 않아도 브라우저 상에서 기본적으로 가지고 있는 스타일에 대한 모든 정보들을 합쳐서 CSSDOM 이라는 트리를 만들게 된다.

  • 따라서 CSSOM에는 우리가 정의한 스타일 뿐 아니라 브라우저에서 기본적으로 설정된 모든 속성 값들이 cascading rule에 의해 정의되어 있는데 이것을 computed styles라고 한다

  • CSSOM은 다음 그림과 같은 구조로 표현 할 수 있다

  • 예를 들어, 제일 부모인 html에서 font size를 14px로 지정하면 cascading rule에 의해 body, section h1등 모든태그의 font size가 14px이 된다.

  • 즉, CSSOM에는 이렇게 계산된 모든 스타일에 관련된 속성들이 포함되어 있다

  • 브라우저가 html 파일을 읽게 되면 제일 처음 DOM Tree를 만들고, 그 다음에 CSS파일을 읽은 다음 스타일을 모두 계산해서 최종적으로 확정된 CSSOM을 만들게 된다.

  • 그 다음 DOM과 CSSOM을 합해서 사용자에게 최종적으로 브라우저에 표기될 것들만 render tree로 만들어진다 (DOM + CSSOM = Render Tree)

  • Render Tree로는 최종적으로 브라우저에 표기될 것들이 그려지기 때문에 head와 같은 태그는 포함 되지 않는다

  • 만약 body에 display : none 속성처럼 브라우저에 표시를 하지 않는 속성이 있으면 최종 render tree에는 포함되지 않는다

  • 하지만 opacity가 0이거나 visibility가 hidden으로 설정되어 있다면 사용자 눈에는 보이지 않지만 요소는 존재하기 때문에 이러한 요소들은 render tree에 포함된다


CSS와 Parsing

  • HTML을 parsing 하는 도중 link라는 태그를 만나게 되는 경우 일반적으로 CSS 자체로는 HTML, 즉 DOM 구조를 변경시킬 수 없기 때문에 HTML 파싱을 block 하지 않는다.

  • HTML을 parsing 하면서 DOM 트리를 만들다가 link 태그에 외부 css 파일이 있으면 다운로딩 요청만 해놓고 계속 DOM트리를 만든다.

  • CSS 파일이 다운로드 되면 CSSOM 트리를 만들고, 그것을 종합해서 최종 render tree가 만들어진다

  • 하지만 자바스크립트 파일은 DOM 구조를 변경시킬 수 있기 때문에 파싱을 하다가 자바스크립트가 연결된 script 태그를 만나게 되는 경우 따로 defer, async 옵션을 쓰지 않았다면 파싱을 멈추고 자바스크립트를 다운로드 하고 실행까지 하게 된다

  • 자바스크립트 안에서 또 CSS 스타일을 변경해서 DOM트리 자체를 변경할 수도 있기 때문에 브라우저마다 구현 사항이 다르지만, 외부 자바스크립트와 외부 CSS 파일을 어떤 순서로 연결 했냐에 따라서 CSS 파일을 요청할때 parsing이 멈출 수도 멈추지 않을수도 있다

  • 예를 들어 자바스크립트에서 어떤 DOM요소의 computed styles를 요청 할 수 있는데 여기서 아직 CSS가 다운로드 되어져있지 않다면 스타일을 받아 올 수 없다.

  • 브라우저 마다 다르겠지만, 이러한 경우를 대비해서 CSS 파일을 받기 전까지 나머지 HTML 파싱이 멈추어질 수 있다.


Reference









© 2020. by dkmqflx

Powered by dkmqflx