렌더트리

• CSSOM 트리 + DOM트리의 결합이다.
  • DOM트리는 콘텐츠 설명, CSSOM트리는 스타일 규칙을 설명한다.
  • 각 요소의 레이아웃 계산하는데 사용된다.
  • 픽셀을 화면에 렌더링하는 페인트 프로세스에 대한 입력으로 처리된다.

렌더링 과정

그럼 우선 렌더 트리를 알기 전 렌더팅 과정을 알아보자.

1. DOM + CSSOM = 렌더트리

• 페이지의 표시되는 모든 DOM콘텐츠와 각 노드에 대한 모든 CSSOM스타일 정보를 캡쳐한다.
  
  • 구글 이미지 입니다.

2. 렌더링 트리에는 페이지를 렌더링하는데 필요한 노드만 포함된다.

• DOM 트리의 루트에서 시작하여 표시되는 노드 각각을 트래버스(순회)합니다.
• 표시된 각 노드에 대해 적절하게 일치하는 CSSOM 규칙을 찾아 적용합니다.
• 표시된 노드를 각 계산된 스타일과 함께 내보낸다.
• 기타
  • visible:hidden 과 display:none은 완전히 다릅니다.
  • visible 요소는 요소를 보이게 하지는 않지만, 레이아웃에서 여전히 공간을 차지합니다. (비어있는 영역이 렌더링이 됩니다.)
  • display 요소는 마찬가지로 요소가 보이지는 않지만, 레이아웃에 포함되지 않도록 렌더링 트리에서 완전히 지워버립니다.

3. 레이아웃은 각 객체의 정확한 위치 및 크기를 계산한다.

• 지금까지 표시할 노드와 해당 노드의 계산된 스타일을 계산 + 기기의 뷰포트 내에서 이러한 노드의 정확한 위치와 크기를 계산 하는 과정을 레이아웃이라고 하고 경우에 따라 리플로우라고 한다.
• 페이지에서 각 객체의 정확한 크기와 위치를 파악하기 위해 브라우저는 렌더링 트리의 루트에서 시작하여 렌더링 트리를 트래버스(순회)한다.

4. 최종 렌더링 트리에서 수행되는 페인트이며, 픽셀을 화면에 렌더링 한다.

• 뷰포트 내에서 각 요소의 정확한 위치와 크기를 정확하게 캡처하는 Box-Model이 출력된다. (모든 상대적인 측정값은 화면에서 절대적인 픽셀로 변환된다.)
• 렌더링 트리의 각 노드를 화면의 실제 픽셀로 변환 하는 단계로 이러한 과정을 페인팅 혹은 레스터화라고 한다.

간략하게 정리하면...

우선 위의 내용들을 토대로 간략하게 렌더링 과정을 정리 해보자.

1. HTML 마크업을 처리하고 DOM 트리를 빌드
2. CSS 마크업을 처리하고 CSSOM 트리를 빌드
3. DOM 및 CSSOM을 결합하여 렌더링 트리를 형성
4. 렌더링 트리에서 레이아웃을 실행하여 각 노드의 기하학적 형태를 계산
5. 개별 노드를 화면에 페인트

다음 포스팅에는 이런 렌더링 과정에서 발생한 리플로우 리페인트를 최적화 하는 방법을 포스팅해볼 예정이다.

참고

• https://developers.google.com/web/fundamentals/performance/critical-rendering-path/render-tree-construction?hl=ko