CRP(Critical Rendering Path)

브라우저가 렌더링되는 과정은 아래와 같다.

1. 렌더링에 필요한 리소스들을 다운로드 받는다.
2. 브라우저는 html 문서를 파싱해 DOM 트리를 생성한다. html 태그를 노드로 변환하고 노드간의 계층 관계를 형성한다.
3. 브라우저는 css 파일을 파싱해 CSSOM 트리를 생성한다. css 속성을 노드로 변환하고 노드간의 계층 관계를 형성한다.
   (CSSOM - CSS Object Model)
4. DOM트리와 CSSOM을 결합해 렌더 트리를 생성한다. 렌더 트리는 최종적으로 브라우저에 표기될 요소들을 말한다.
5. reflow는 렌더링 되어야할 요소들의 화면 상 위치를 잡는 것을 말한다.
6. repaint는 위치가 잡힌 요소들에 색칠을 하는 것이다

6단계까지 진행되고 나면 합성(Composit)이 되고 렌더링이 된다.

리플로우가 일어난다면 뒷순서인 리페인트도 일어나게 된다. 당연히 리플로우와 리페인트가 자주 일어나게 되면 성능에 좋지 않다.

리플로우가 일어나 깜빡임 현상이 생기고 화면 요소의 위치가 예상치 않게 달라지는 것을 레이아웃 쉬프트라고 한다. 레이아웃 쉬프트가 일어나면 성능은 차치하고서라도 사용자 경험에 매우 안좋은 영향을 미칠 수 있기 때문에 반드시 개선해야한다.

예를 들어 목록을 조회해올 땐 데이터가 들어올 요소의 높이를 지정해서 리플로우가 일어나지 않게 한다.