HTML이 화면에 렌더링 되는 순서 (DOM? CSSOM?)

우리가 코드를 작성하면, 화면에 어떤 원리로 나오는 것일까?
궁금해서 공부해 봤다.

HTML → DOM

브라우저는 우리가 작성한 HTML을 읽는다.
HTML은 Element로 이뤄져 있는데, 이걸 노드로 변환한다.
이렇게 변환한 노드를 모으면 DOM Tree가 된다.

즉, DOM Tree는 노드의 집합이라는 것!

DOM에는 어떤 정보가 있을까?

DOM에는 콘텐츠, 이벤트에 관련된 내용을 가지고 있다.
(단, 스타일은 제외된다.)

노드에 콘텐츠(Value)가 들어있는 건 이해하지만, 이벤트는 어떻게 가지고 있는 걸까?
바로 Node가 EventTarget을 상속받기 때문!
EventTarget에는 addEventListener 등 이벤트 등록, 제거 관련 메서드가 있는데,
노드에서 이것을 상속하기 때문에 DOM에도 해당 정보가 들어가게 된다.

DOM + CSS → CSSOM

DOM을 만들었으면, 브라우저는 DOM과 CSS를 읽고 CSSOM을 만든다.
CSSOM이란, DOM의 각 노드가 어떤 CSS 속성을 가지고 있는지 나타내는 트리를 말한다.
즉, CSSOM에는 노드 문서에 대한 정보는 없고, ONLY 스타일에 대한 정보만 가지고 있다.

CSS는 Cascading이 적용되어서 부모에게 적용된 스타일은 자식에게도 적용된다.

DOM + CSSOM → Render Tree

브라우저가 DOM, CSSOM까지 만들었다!
이제 사용자에게 보여줄 Render Tree를 만들 차례이다.

DOM에 CSSOM에 있는 스타일을 적용해서 Render Tree를 구성하게 되는데,
이때 보이지 않도록 설정된 노드는 Render Tree에 포함되지 않는다.

Render Tree가 만들어지면 사용자에게 화면이 보이게 된다.