[Web¦Browser] DOM, CSSOM, Render Tree

Critical Rendering Path | Constructing the Object Model

Critical Rendering Path | Render-Tree Construction, Layout, and Paint

위 글을 읽으면서 정리했다.

---

1. DOM(Document Object Model)

1. 변환: 브라우저가 HTML의 원시 바이트를 읽어와서, 파일에 지정된 인코딩(UTF-8)에 따라 개별 문자로 변환

2. tokenize: 브라우저가 문자열을 고유 토큰으로 변환(토큰에 따라 의미, 규칙이 있음)

3. lexing: 토큰은 속성, 규칙을 정의하는 객체로 변환

4. DOM 생성: HTML 마크업이 여러 태그 간의 관계를 정의하기 때문에 생성된 객체는 트리 데이터 구조 내에 연결

이 전체 프로세스의 최종 출력이 바로 이 간단한 페이지의 DOM(Document Object Model)이며, 브라우저는 이후 모든 페이지 처리에 이 DOM을 사용한다.

 

2. CSSOM(CSS Object Model)

- 브라우저는 DOM 생성하는 동안 CSS 스타일시트 링크 태그를 접하고 리소스에 대해 요청한다.

- HTML을 DOM 트리로 만든 것처럼, CSS도 브라우저가 이해하고 처리할 수 있도록 변환해줘야 한다. HTML과 같은 과정을 반복한다.

 

3. Render Tree

- Render Tree: 화면에 표시되어야 할 모든 노드의 컨텐츠, 스타일 정보를 포함하는 트리

- DOM, CSSOM 결합되어 형성

- 페이지를 렌더링하는 데 필요한 노드만 포함

- display: none 속성은 요소가 보이지 않으며 레이아웃에 포함되지 않도록 렌더링 트리에서 요소 완전 제거

- visibility: hidden 속성은 요소를 보이지 않게 만들지만, 여전히 레이아웃에서 공간을 차지(비어있는 상자로 렌더링)

- 최종 출력은 화면에 표시되는 모든 노드의 콘텐츠, 스타일 정보를 모두 포함하는 렌더링 트리. 렌더링 트리가 생성되었으므로 레이아웃 단계로 진행할 수 있다.

렌더 트리 생성: 표시할 노드와 해당 노드의 스타일 계산

레이아웃(리플로우): 기기 뷰포트 내의 노드의 정확한 위치와 크기 계산

페인팅(래스터화): 렌더링 트리의 각 노드를 화면의 실제 픽셀로 변환하는 마지막 단계