지난 시간에 살펴본 브라우저의 렌더링 과정은 아래 과정으로 이루어집니다. 아마 여기까지는 대부분 아실 내용일텐데요.
- 서버에서 HTML 파일을 수신
- HTML 파싱
- DOM 트리 생성
- CSSOM 트리 생성
- 자바스크립트 파싱 및 실행
- DOM과 CSSOM을 결합하여 렌더트리 생성
- 레이어
- 레이아웃
- 페인트
- Composite
아마 4번의 레이어와 레이어와 7번의 Composite 단계에 대해서는 생소하신 분도 있을 것 같습니다. 오늘은 이 두 단계에 대해 자세히 알아보겠습니다. 나머지 단계에 대해서는 지난 시간에 작성한 입문편 을 참고하시면 되겠습니다
레이어
먼저 레이어 트리를 만드는 단계에 대해 알아보겠습니다. 아마 레이어 단계가 생소하신 분들이 많을텐데요.
z-index 속성이나 3d transform 속성을 떠올리면 이해가 빠를 것 같습니다. 이것들은 모두 레이어와 관련되어있거든요.
레이어 트리는 painting 순서를 결정하는 데 사용됩니다. 예를 들어 겹쳐있는 두 엘리먼트 A와 B가 있을 때 렌더링 엔진은 z-index를 통해 무엇을 먼저 painting할지 결정합니다.
모든 엘리먼트가 레이어를 가지고 있는 것은 아닙니다. 레이어 페인팅은 비용이 많이 드는 연산이기 때문이죠. 그렇다면 어떤 속성이 레이어와 연관되어 있을까요?
- z-index
- position: absolute
- transform
- will-change
위 속성들은 레이어 페인팅을 발생시키는 일부 속성들입니다. 전체 리스트는 여기서 확인하실 수 있습니다.
개발자 도구에서도 레이어를 확인할 수 있는데요. 보여드리겠습니다 :)
<div class="content">
<h1>스크롤을 내려보세요</h1>
<p>왼쪽 상단의 빨간 상자는 스크롤과 관계없이 고정된 상태로 유지됩니다.</p>
</div>
<div class="fixed-box">고정</div>.content {
height: 200vh;
...
}
.fixed-box {
position: fixed;
top: 10px;
left: 10px;
...
background: tomato;
}
위에 position: fixed 속성을 가진 요소가 있습니다. 이 요소는 화면에 고정되어 스크롤과 상관없이 항상 같은 위치에 표시됩니다. 브라우저는 이를 효율적으로 관리하기 위해 독립적인 레이어를 생성합니다. 스크롤이 발생해도 고정 요소가 항상 동일한 위치를 유지해야하기 때문입니다.
이제 브라우저 개발자 도구에서 layers 항목을 보려고 하는데요. 기본적으로 세팅이 안되어있을 확률이 높습니다.
맨위 패널(Elements - Console - Sources ...) 쪽에 Layers 메뉴가 없다면 오른쪽 위의 더보기 버튼(점 세개 아이콘)을 누르고 More tools - Layers를 선택합니다. 아래 화면을 참고해주세요 :)
이제 봐볼까요 ㅎㅎ 오른쪽에 각각의 레이어가 순서대로(#document -> .fixed-box -> #30) 놓여있습니다. 마우스를 hover하면 각각의 항목이 오른쪽에 표시됩니다. 사진에 나와있지 않지만 #30은 오른쪽의 스크롤바를 나타냅니다.
Composite
이제 Composite 단계에 대해 알아보겠습니다. 참고로 이전 단계들은 렌더 프로세스의 메인 스레드가 주관하고 Composite부터는 컴포지터 스레드가 맡아 렌더링하게 됩니다.
레이어는 페이지 전체 길이만큼 클 수 있으므로 컴포지터 스레드는 레이어를 타일로 나누고 각 타일을 래스터 스레드로 보냅니다.
이제 래스터 스레드 풀에서 각 타일을 병렬적으로 처리합니다. 프로세스를 가속화하기 위해 래스터 스레드는 GPU 프로세스에 타일을 전송합니다. 그러면 GPU 프로세스가 래스터화를하고 GPU 메모리에 픽셀 데이터를 저장합니다. (아래 그림 참고)
*여기서 래스터란 브라우저가 DOM 구조, 각 요소의 스타일, 페인트 순서를 바탕으로 픽셀로 변환하는 것을 말합니다.
래스터화가 끝나면 컴포지터 스레드가 Draw Quad라고 하는 타일들의 정보를 수집하여 컴포지터 프레임을 생성합니다. 이는 브라우저 프로세스로 전송되고 최종적으로 모든 프레임이 GPU로 전송되어 화면에 표시되게 됩니다.
Composite 과정 덕분에 렌더링 과정에서 스레드를 나누어 사용할 수 있게 되었고 레이어를 재활용, GPU를 이용한 빠르고 부드러운 애니메이션 처리 등의 장점을 얻게 되었습니다.
하지만 레이어를 과하게 분리하면 GPU 메모리가 부족해져 성능문제가 발생할 수 있으므로 적절하게 안배하는 것이 중요합니다. 특히 고성능 애니메이션을 만드는 방법이라는 글에서는 will-change 같은 속성들을 초기부터 과도하게 사용하지 말고 그래픽 문제가 발생했을 경우 고려하라고 조언합니다. 해당 글도 읽어보시면 많은 도움이 되실 것 같습니다 :)
출처
How does browser work step by step
'웹개념 파보기' 카테고리의 다른 글
| 브라우저의 렌더링(입문편) (3) | 2024.11.14 |
|---|---|
| 브라우저는 HTML를 어떻게 파싱할까? (1) | 2024.11.09 |