앞선 글에서 브라우저의 동작원리와 함께 CRP 5단계가 나왔다.
DOM에 어떤 변화가 생기면 Reflow 나 Repaint가 실행된다.
어떤 변화라고 했는데 Reflow와 Repaint를 모두 발생시키는 것도 있고 Repaint만 발생 시키는 것도 있고 다양하다. 그래서 일단 어떤 변화라고 두루뭉술하게 언급했다.
Reflow와 Repaint에 대해서 알면 최적화하는데 도움이 된다.
Reflow(Layout)
CRP 5단계 중 4단계인 레이아웃(Layout)에 해당된다.
HTML 요소의 크기, 위치 등이 바뀌면 각 요소들의 크기와 위치를 다시 계산해야하기에 Reflow가 진행된다.
렌더 트리의 전체 혹은 일부를 새로 구성하는 것
Repaint(Paint)
Reflow만 실행되면 화면에 반영되지 않는다. 계산만 하기 때문이다. 변화가 생긴 노드들의 위치, 크기에 대해 계산이 끝났으면 화면에 그려야한다. 이를 Repaint라 한다.
Repaint 는 Reflow가 무조건 전제조건은 아니다. Reflow 없이 Repaint만 일어날 수도 있다.
Layer
모던 브라우저들은 Reflow(Layout) 이후 Update Layer Tree 라는 단계가 생겼다. 정해진 기준에 따라 Layer가 나뉘게 된다.
Layer는 Render Layer와 Graphics Layer 두 종류가 있다.
Render Layer
일반적인 CRP(Critical Rendering Path)의 렌터트리 결과
Graphics Layer
GPU를 사용하는 레이어
Graphics Layer는 Texture로 GPU에 업로드됨.
Texture는 RAM에서 GPU의 VRAM으로 이동하고 Mesh, Geometry와 매핑된다.
크롬은 각 그래픽스 레이어를 Texture로 취급해 GPU에 업로드한다.
Layer의 position을 수정한다거나 변형하는 경우 아주 저렴하게 매핑 할 수 있다.
이렇게 Layer를 분리하면 좋은 점은 Reflow와 Repaint가 불필요하다는 것
모던 브라우저에서 레이아웃 이후 렌더링 하는 과정은 다음과 같다.
1. 기준에 따라 레이어 분리
2. 그래픽스 레이어 GPU에 업로드
3. Composite(아래에 나올)
이 역시 100% 해법은 아니다.
VRAM과 RAM은 물리적으로 다른 공간에 존재하므로 데이터를 주고 받는데 손실이 발생하며 CPU가 직접 처리 하지 않을 뿐 CPU가 필요하다.
지금 당장 Layer를 확인해보자.
1. 개발자 도구를 켜고 우측 상단의 점세개-More tools로 간다.
2. Layers 클릭
3. 지금 화면의 레이어가 표시된다.
4. 좌측의 Tree를 봐도되고 우측의 회전 기능을 켜서 레이어들을 눕혀봐도 된다.
Composite
자바스크립트로부터 DOM Style변화가 생기면 Reflow(Layout)으로 재계산하고 Repaint(Paint)과정을 통해 다시 그린다고 지금까지 배웠다.
그렇다면 아래 그림에서 마지막에 나오는 Composite은 무엇일까?
앞에서 Layer들을 나눈다고 했다.
나눈 Layer들을 우리가 보는 화면으로 합성해주는 단계가 Composite이다.
Composite은 메인 쓰레드에서 벗어나 다른 Thread Flow를 가지고 화면을 업데이트 한다. 다른 Thread Flow를 가지기 때문에 메인 쓰레드에서 병목이나 Block이 발생해도 Composite만 사용하는 애니메이션은 계속 재생될 수 있다.
볼만한 링크
CSS Triggers
렌더링 엔진 별로 CSS의 어떤 속성이 변경됐을때
layout, paint, composite 이 발생하는지 정리해둔 사이트
Chorme for Developers - 최신 웹브라우저 들여다보기 (3부)
참고자료
https://devsdk.github.io/ko/development/2021/03/08/ReflowRepaint.html
https://devsdk.github.io/ko/development/2021/03/29/blink-render-composition.html (Composite 심화)
https://sypear.tistory.com/25
https://velog.io/@young_pallete/Reflow-Repaint%EC%9D%84-%EC%95%8C%EC%95%84%EB%B3%B4%EC%9E%90
https://boxfoxs.tistory.com/409
https://boxfoxs.tistory.com/408 (Virtual DOM 이 필요한 이유)
https://github.com/im-d-team/Dev-Docs/blob/master/Browser/Layer_Model.md (Layer 심화)
https://velog.io/@moonshadow/Layer (Layer)
