레이아웃(리플로우) 및 페인트

Seokkitdo·2022년 1월 8일

레이아웃 리플로우 페인트

WEB

목록 보기

3/4

브라우저 렌더링 과정 중 리플로우와 페인트에 대해 좀 더 자세하게 알아보고자 포스팅을 남깁니다.

브라우저 렌더링 과정

DOM 및 CSSOM 트리는 결합되어 렌더링 트리를 형성합니다.
렌더링 트리에는 페이지를 렌더링하는데 필요한 노드만 포함됩니다. ex)display: none 제외
레이아웃은 각 객체의 정확한 위치 및 크기를 계산합니다.
마지막 단계는 최종 렌더링 트리에서 수행되는 페인트이며, 픽셀을 화면에 렌더링합니다.

먼저 브라우저가 DOM 및 CSSOM 을 결합하여 렌더링 트리를 형성합니다. 이 트리는 페이지에 표시되는 모든 DOM 콘텐츠와 각 노드에 대한 모든 CSSOM 스타일 정보를 캡쳐합니다.

렌더링 트리를 생성하려면 브라우저가 대략적으로 다음 작업을 수행합니다.

1. DOM 트리의 루트에서 시작하여 표시되는 노드 각각을 순회합니다.

일부 노드(스크립트 태그, 메타 태그)는 표시되지 않으며, 렌더링된 출력에 반영되지 않으므로 생략됩니다.
일부 노드는 CSS를 통해 숨겨지며 렌더링 트리에서도 생략됩니다. 예를 들어, 위의 이미지에서 CSSOM 을 보시면 span 태그에 display: none 이라는 명시적 규칙이 있기 때문에 렌더링 트리에서 누락됩니다.

2. 표시된 각 노드에 대해 적절하게 일치하는 CSSOM 규칙을 찾아 적용합니다.

3. 표시된 노드를 콘텐츠 및 계산된 스타일과 함께 내보냅니다.

visibility: hidden 속성은 display: none 과는 다릅니다. 전자는 요소를 보이지 않게 만들지만, 여전히 레이아웃에서 공간을 차지합니다.(즉, 비어있는 상자로 렌더링됌) 반면 후자(display: none)은 요소가 보이지 않으며 레이아웃에 포함되지 않도록 렌더링 트리에서 요소를 완전히 제거합니다.

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

레이아웃(리플로우)

지금까지 표시할 노드와 해당 노드의 계산된 스타일을 계산했습니다. 하지만 기기의 뷰포트 내에서 이러한 노드의 정확한 위치와 크기를 계산하지는 않았습니다. 이것이 바로 '레이아웃' 단계이며 경우에 따라 '리플로우' 라고도 합니다.

페이지에서 각 객체의 정확한 크기와 위치를 파악하기 위해 브라우저는 렌더링 트리의 루트에서 시작하여 렌더링 트리를 순회합니다.
간단한 실습 예시를 살펴보도록 하겠습니다.

위 코드를 보시면 중첩된 div가 포함되어 있습니다. 첫 번째(상위) div는 노드의 표시 크기를 뷰포트 너비의 50%로 설정하며, 두 번째(하위) div의 경우 해당 너비를 상위 div의 50%(즉 뷰포트 너비의 25%)로 설정했습니다.

레이아웃 프로세스에서는 뷰포트 내에서 각 요소의 정확한 위치와 크기를 정확하게 캡처하는 '상자 모델'이 출력됩니다. 모든 상대적인 측정값은 화면에서 절대적인 픽셀로 변환됩니다.

페인트

마지막으로, 이제 표시되는 노드와 해당 노드의 계산된 스타일 및 기하학적 형태에 대해 파악했으므로, 렌더링 트리의 각 노드를 화면의 실제 픽셀로 변환하는 마지막 단계에 이러한 정보를 전달할 수 있습니다. 이 단계를 흔히 '페인팅' 또는 '래스터화'라고 합니다.

렌더링 트리 생성, 레이아웃 및 페인트 작업을 수행하는 데 필요한 시간은 문서의 크기, 적용된 스타일 및 실행 중인 기기에 따라 달라집니다. 즉 문서가 클수록 브라우저가 수행해야 하는 작업도 더 많아지며, 스타일이 복잡할수록 페인팅에 걸리는 시간도 늘어납니다.
예를 들어 단색은 페인트하는 데 시간과 작업이 적게 필요한 반면, 그림자 효과는 렌더링하는 데 시간과 작업이 단색에 비해 상대적으로 더 필요합니다.

이러한 과정이 끝나게 되면 비로소 페이지가 뷰포트에 표시됩니다.