DOM(Document Object Model)이란, 브라우저가 문서 구조를 자신들이 이해할 수 있는 Object(Node)로 변환한 것입니다. DOM은 트리 형태라서 특정 노드를 찾거나 수정하거나 제거하거나 원하는 곳에 삽입할 수 있습니다.

DOM Tree

브라우저는 HTML 코드를 위에서 부터 한줄 한줄 읽으면서 HTML DOM 트리를 만듭니다.

다음은 어떤 HTML의 DOM 트리 입니다. HTML의 태그들은 각 노드에 매핑됩니다.

모든 노드는 EventTarget을 상속받기 때문에 노드에 이벤트를 발생시킬 수도 있습니다.

EventTarget의 3가지 메서드

• EventTarget.addEventListener()
• EventTarget.removeEventListener()
• EventTarget.dispatchEvent()

웹 브라우저는 DOM을 활용해서 노드에 자바스크립트와 CSS를 적용합니다.

CSSOM Tree

CSSOM(CSS Object Model)이란, HTML안에 들어있는 모든 CSS 속성 값들을 DOM과 합친 것입니다. CSSOM에는 우리가 정의한 스타일 뿐만 아니라 브라우저에서 기본적으로 설정된 스타일 속성값들이 모두 정의되어 있습니다.

Render Tree

브라우저가 HTML을 읽어 DOM을 만들고, 그다음 CSS을 읽어 CSSOM을 만듭니다. DOM과 CSSOM을 합쳐서 최종적으로 브라우저에 그려질 노드들만 선별되어 Render Tree에 포함됩니다.

Render Tree에는 BODY부분만 들어있는데 HEAD 부분은 사용자의 눈에 보이지않는 정보들만 있기 때문입니다.

그리고 CSSOM에 dispaly: none의 속성을 가진 노드는 최종 Render Tree에 포함되지 않습니다. 반면 opacity: 0 이거나 visibility: hidden 인 경우에는 Render Tree에 포함됩니다. 다만 브라우저 화면상 보이지 않을 뿐입니다.

렌더링 과정

브라우저에 url을 입력해서 사용자의 눈에 화면이 나오기 까지의 과정을 알아보겠습니다.

• request/response: 먼저 브라우저가 서버에 HTML파일을 요청하고 받습니다.
• scripting: 받은 HTML 파일을 한줄 한줄 읽어들여 DOM으로 변환합니다. 그다음 CSS를 CSSOM으로 변환합니다.
• render: DOM과 CSSOM으로 Render Tree를 만듭니다.
• layout: Render Tree를 기반으로 각 노드가 어떤 위치에 어떤 크기로 표시될지 계산하여 레이아웃을 구상합니다.
• painting: 계산된 값을 이용해 각 노드를 묶어 위치별로 레이어를 만듭니다.
• composition : 레이어를 합성하여 실제 화면에 나타냅니다.

성능 고려

렌더링의 성능을 높히기 위해서는 Construction 부분과 Operation 부분에서 각각 신경써줘야 합니다. Construction 부분에서는 DOM을 만들 때 최소한의 크기로 만드는것이 성능이 좋으니, HTML 코드를 짤 때 불필요한 태그를 자제하는 것이 좋습니다. Operation 부분에서는 최대한 layout을 다시 계산하지 않게끔 하는게 좋습니다.