렌더링 트리 생성, 레이아웃 및 페인트

Ilya Grigorik
Ilya Grigorik
X 홈페이지

CSSOM 및 DOM 트리는 렌더링 트리로 결합됩니다. 이 렌더링 트리는 표시되는 각 요소의 레이아웃을 계산하는 데 사용되고 픽셀을 화면에 렌더링하는 페인트 프로세스에 대한 입력으로 작동합니다. 최적의 렌더링 성능을 얻기 위해서는 이러한 각 단계를 최적화하는 것이 중요합니다.

객체 모델 생성에 관한 이전 섹션에서 HTML 및 CSS 입력을 기반으로 DOM 및 CSSOM 트리를 빌드했습니다. 그러나 이 둘은 문서의 서로 다른 측면을 캡처하는 독립적인 객체입니다. 하나는 콘텐츠를 설명하고 다른 하나는 문서에 적용되어야 하는 스타일 규칙을 설명합니다. 이 두 가지를 병합하여 브라우저가 화면에 픽셀을 렌더링하도록 하려면 어떻게 해야 할까요?

요약

  • DOM 트리와 CSSOM 트리가 결합되어 렌더링 트리를 형성합니다.
  • 렌더링 트리에는 페이지를 렌더링하는 데 필요한 노드만 포함됩니다.
  • 레이아웃은 각 객체의 정확한 위치와 크기를 계산합니다.
  • 마지막 단계는 최종 렌더링 트리에서 가져와 화면에 픽셀을 렌더링하는 페인트입니다.

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

DOM 및 CSSOM이 결합되어 렌더링 트리를 생성합니다.

렌더링 트리를 생성하기 위해 브라우저는 대략적으로 다음 작업을 실행합니다.

  1. DOM 트리의 루트에서 시작하여 표시되는 각 노드를 트래버스합니다.

    • 일부 노드는 표시되지 않으며 (예: 스크립트 태그, 메타 태그 등) 렌더링된 출력에 반영되지 않으므로 생략됩니다.
    • 일부 노드는 CSS를 통해 숨겨지며 렌더링 트리에서도 생략됩니다. 예를 들어, 위의 예에서 스팬 노드는 'display: none' 속성을 설정하는 명시적 규칙이 있으므로 렌더링 트리에서 누락됩니다.

  2. 표시되는 각 노드에 대해 적절한 CSSOM 규칙을 찾아 적용합니다.

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

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

지금까지 표시해야 할 노드와 계산된 스타일을 계산했지만, 기기의 표시 영역 내에서 노드의 정확한 위치와 크기를 계산하지는 않았습니다. 이를 '레이아웃' 단계('리플로우'라고도 함)라고 합니다.

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

<!DOCTYPE html>
<html>
  <head>
    <meta name="viewport" content="width=device-width,initial-scale=1" />
    <title>Critial Path: Hello world!</title>
  </head>
  <body>
    <div style="width: 50%">
      <div style="width: 50%">Hello world!</div>
    </div>
  </body>
</html>

사용해 보기

위 페이지의 본문에는 두 개의 중첩된 div가 포함되어 있습니다. 첫 번째(상위) div는 노드의 표시 크기를 표시 영역 너비의 50% 로 설정하고 두 번째 div(상위 요소에 포함된)는 너비를 상위 요소의 50%, 즉 표시 영역 너비의 25% 로 설정합니다.

레이아웃 정보 계산

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

마지막으로, 이제 표시되는 노드와 해당 노드의 계산된 스타일 및 도형을 알았으므로 이 정보를 최종 단계로 전달할 수 있습니다. 최종 단계는 렌더링 트리의 각 노드를 화면의 실제 픽셀로 변환합니다. 이 단계를 흔히 '페인팅' 또는 '래스터화'라고 합니다.

브라우저가 해야 할 작업이 많기 때문에 다소 시간이 걸릴 수 있습니다. 그러나 Chrome DevTools는 위에서 설명한 세 단계 모두에 대해 약간의 통찰력을 제공할 수 있습니다. 원래 'hello world' 예시의 레이아웃 단계를 살펴보겠습니다.

DevTools에서 레이아웃 측정

  • 'Layout' 이벤트는 타임라인에서 렌더링 트리 생성, 위치 및 크기 계산을 캡처합니다.
  • 레이아웃이 완료되면 브라우저가 'Paint Setup' 및 'Paint' 이벤트를 발생시킵니다. 이러한 이벤트는 렌더링 트리를 화면의 픽셀로 변환합니다.

렌더링 트리 생성, 레이아웃 및 페인트를 수행하는 데 필요한 시간은 문서의 크기, 적용된 스타일, 문서가 실행되는 기기에 따라 다릅니다. 문서가 클수록 브라우저에서 더 많은 작업을 수행하며 스타일이 복잡할수록 페인팅에 더 많은 시간이 걸립니다 (예: 단색은 페인트에 '저렴'하지만 그림자는 계산 및 렌더링에 '비용이 많이 듭니다').

페이지가 드디어 표시 영역에 표시됩니다.

렌더링된 Hello World 페이지

다음은 브라우저의 단계를 요약한 것입니다.

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

이 데모 페이지는 간단해 보일 수 있지만, 이를 위해서는 상당한 작업이 필요합니다. DOM 또는 CSSOM이 수정된 경우, 화면에서 다시 렌더링해야 할 픽셀을 알아내기 위해 이 프로세스를 반복해야 합니다.

주요 렌더링 경로를 최적화하는 것은 위 시퀀스 1~5단계를 수행하는 데 소요되는 총 시간을 최소화하는 프로세스입니다. 이렇게 하면 콘텐츠가 가능한 한 빨리 화면에 렌더링되고 초기 렌더링 후 화면 업데이트 사이의 시간이 줄어듭니다. 즉, 대화형 콘텐츠의 새로고침 빈도를 높일 수 있습니다.

의견