게시일: 2014년 3월 31일
CSSOM 및 DOM 트리가 렌더링 트리로 결합된 후 이 트리를 사용하여 각 표시되는 요소의 레이아웃을 계산하고 화면에 픽셀을 렌더링하는 페인트 프로세스의 입력으로 사용합니다. 이러한 각 단계를 최적화하는 것은 최적의 렌더링 성능을 달성하는 데 매우 중요합니다.
이전 객체 모델 구성 섹션에서는 HTML 및 CSS 입력을 기반으로 DOM 및 CSSOM 트리를 빌드했습니다. 그러나 둘 다 문서의 여러 측면을 캡처하는 독립적인 객체입니다. 하나는 콘텐츠를 설명하고 다른 하나는 문서에 적용해야 하는 스타일 규칙을 설명합니다. 이 두 가지를 병합하고 브라우저가 화면에 픽셀을 렌더링하도록 하려면 어떻게 해야 할까요?
요약
- DOM 및 CSSOM 트리가 결합되어 렌더링 트리를 형성합니다.
- 렌더링 트리에는 페이지를 렌더링하는 데 필요한 노드만 포함됩니다.
- 레이아웃은 각 객체의 정확한 위치와 크기를 계산합니다.
- 마지막 단계는 최종 렌더링 트리를 가져와 화면에 픽셀을 렌더링하는 페인트입니다.
먼저 브라우저는 DOM과 CSSOM을 '렌더링 트리'로 결합합니다. 이 트리는 페이지의 모든 표시되는 DOM 콘텐츠와 각 노드의 모든 CSSOM 스타일 정보를 캡처합니다.
렌더링 트리를 구성하기 위해 브라우저는 대략 다음을 실행합니다.
DOM 트리의 루트에서 시작하여 각 표시되는 노드를 트래버스합니다.
- 일부 노드는 표시되지 않으며 (예: 스크립트 태그, 메타 태그 등) 렌더링된 출력에 반영되지 않으므로 생략됩니다.
- 일부 노드는 CSS를 사용하여 숨겨지며 렌더링 트리에서도 생략됩니다. 예를 들어 위의 예에서 span 노드는 'display: none' 속성을 설정하는 명시적 규칙이 있으므로 렌더링 트리에서 누락됩니다.
각 표시되는 노드에 대해 적절한 일치 CSSOM 규칙을 찾아 적용합니다.
콘텐츠와 계산된 스타일이 있는 표시되는 노드를 내보냅니다.
최종 출력은 화면에 표시되는 모든 콘텐츠의 콘텐츠와 스타일 정보를 모두 포함하는 렌더링 트리입니다. 렌더링 트리가 준비되면 '레이아웃' 단계로 진행할 수 있습니다.
지금까지 표시되어야 하는 노드와 계산된 스타일을 계산했지만 기기의 표시 영역 내에서 정확한 위치와 크기를 계산하지 않았습니다. 이는 '리플로우'라고도 하는 '레이아웃' 단계입니다.
페이지의 각 객체의 정확한 크기와 위치를 파악하기 위해 브라우저는 렌더링 트리의 루트에서 시작하여 트리를 트래버스합니다. 다음 예를 살펴보세요.
<!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>
웹페이지로 렌더링된 이 HTML 예를 살펴보세요.
이전 예의 <body>에는 중첩된 <div> 두 개가 포함되어 있습니다. 첫 번째(상위) <div>는 노드의 디스플레이 크기를 표시 영역 너비의 50%로 설정하고 상위에 포함된 두 번째 <div>는 width를 상위의 50%(즉, 표시 영역 너비의 25%)로 설정합니다.
레이아웃 프로세스의 출력은 표시 영역 내에서 각 요소의 정확한 위치와 크기를 정확하게 캡처하는 '상자 모델'입니다. 모든 상대적 측정항목은 화면의 절대 픽셀로 변환됩니다.
마지막으로 표시되는 노드와 계산된 스타일 및 도형을 알았으므로 이 정보를 렌더링 트리의 각 노드를 화면의 실제 픽셀로 변환하는 최종 단계로 전달할 수 있습니다. 이 단계를 '페인팅' 또는 '래스터화'라고도 합니다.
브라우저가 많은 작업을 해야 하므로 시간이 걸릴 수 있습니다. 그러나 Chrome DevTools는 앞에서 설명한 세 단계 모두에 관한 통찰력을 제공할 수 있습니다. 원래 'hello world' 예의 레이아웃 단계를 검토합니다.
- '레이아웃' 이벤트는 타임라인에서 렌더링 트리 구성, 위치, 크기 계산을 캡처합니다.
- 레이아웃이 완료되면 브라우저는 렌더링 트리를 화면의 픽셀로 변환하는 '페인트 설정' 및 '페인트' 이벤트를 실행합니다.
렌더링 트리 구성, 레이아웃, 페인트를 실행하는 데 필요한 시간은 문서 크기, 적용된 스타일, 실행 중인 기기에 따라 다릅니다. 문서가 클수록 브라우저가 더 많은 작업을 해야 합니다. 스타일이 복잡할수록 페인팅에 걸리는 시간도 길어집니다 (예: 단색은 페인팅하는 데 '저렴'하지만 그림자는 계산하고 렌더링하는 데 '비용'이 많이 듭니다).
페이지가 표시 영역에 표시됩니다.
다음은 브라우저 단계의 간단한 요약입니다.
- HTML 마크업을 처리하고 DOM 트리를 빌드합니다.
- CSS 마크업을 처리하고 CSSOM 트리를 빌드합니다.
- DOM과 CSSOM을 렌더링 트리로 결합합니다.
- 렌더링 트리에서 레이아웃을 실행하여 각 노드의 도형을 계산합니다.
- 개별 노드를 화면에 페인트합니다.
데모 페이지는 기본적으로 보일 수 있지만 브라우저에서 상당한 작업이 필요합니다. DOM 또는 CSSOM이 수정된 경우 화면에서 다시 렌더링해야 하는 픽셀을 파악하기 위해 프로세스를 반복해야 합니다.
중요 렌더링 경로 최적화 는 위의 순서에서 1~5단계를 실행하는 데 걸리는 총 시간을 최소화하는 프로세스입니다. 이렇게 하면 콘텐츠가 최대한 빨리 화면에 렌더링되고 초기 렌더링 후 화면 업데이트 간의 시간도 줄어듭니다. 즉, 대화형 콘텐츠의 재생률이 높아집니다.