렌더 트리 (Render Tree)

렌더트리와 그 역할

CSSOM과 DOM 트리는 결합하여 렌더 트리를 만들어낸다.

 

렌더 트리는 웹 페이지에 나타낼 각 요소들의 위치(Layout, 레이아웃)을 계산하는데 사용되고 픽셀을 화면에 렌더링하는 페인트(Paint) 즉 화면에 요소들을 표현하는 프로세스를 위해 존재한다.

 

렌더트리의 생성과 그 후 과정

렌더 트리는 DOM과 CSSOM의 결합으로 만들어진다.

 

1. DOM 트리의 루트(Document)에서 시작되어 단계별로 노드들을 배치한다. 이때 일부 노드(메타태그, 스크립트 태그) 등은 여기서 제외된다. 또한 CSS를 통해 숨겨지는 노드들도 여기서 제외된다.

 

2. 표시된 각 노드들에 대해 적절하게 맞는 CSSOM 규칙을 찾아 적용한다.

 

3. 표시된 노드들를 콘텐츠와 계산된 스타일과 결합하여 내보낸다.

 

4. 이렇게 만들어진 렌더 트리를 통해 레이아웃과 페인트 단계로 갈 수 있다.

 

5. 렌더 엔진은 렌더 트리를 참조해 요소들의 각 위치(Layout)를 잡는다.

 

6. 이제 잡힌 위치에 각각의 요소들을 그려(Painting)낸다.