2. CRP
1. Critical Rendering Path(CRP)
CRP를 이해해야 하는 이유는 초기 페이지 렌더링 과정을 불필요하게 지연시키지 않도록 함으로써 렌더링 성능을 최적화할 수 있기 때문
2. CRP 수행 단계
CRP는 다음의 단계들을 거치며 수행됨
- HTML 문서를 통해 DOM(Document Object Model) 구성
- CSS를 통해 CSSOM(CSS Object Model) 구성
- DOM 또는 CSSOM을 조작하는 JavaScript 코드가 있을 경우 적용
- DOM과 CSSOM을 기반으로 렌더링을 위한 렌더 트리(Render tree) 구성
→ DOM + CSSOM = Render tree - 스타일 계산 및 레이아웃 배치 작업 수행(Style)
- HTML 요소를 픽셀 단위로 메모리 상에 그리기(Paint)
- 픽셀이 겹칠 경우, 합성 작업 수행(Composition)
- 최종 픽셀을 화면에 그리기(Display)
위 단계가 모두 수행되어야 사용자는 페이지에 표시된 컨텐츠들을 볼 수 있음
3. 렌더링은 지속적이고 반복하여 수행되는 과정
렌더링 프로세스는 여러 번 반복해서 발생함
페이지를 가장 처음으로 렌더링하는 초기 렌더링 과정에서는 이 작업들이 처음으로 실행되지만, 이후 페이지 렌더링에 영향을 주는 추가적인 리소스들(ex. 이미지, 폰트, svg 등)이 점차 (다운)로드됨에 따라 브라우저는 전체 또는 일부 렌더링 과정을 다시 실행하여 사용자에게 보이는 화면을 계속해서 갱신함
CRP는 이 과정 중에서도 초기 렌더링에 초점을 맞춘 개념이며,
이를 위해 필요한 핵심 리소스들(critical resources) 에 따라 달라짐
렌더링은 단발성이 아님
이미지 파일, 폰트, JS 번들(file)이 로딩 완료되었을 때 재렌더링 발생
CRP는 초기 렌더링에 집중
전체 렌더링 흐름이 아닌, 사용자가 처음 컨텐츠를 보게되는 시점까지의 흐름을 의미
따라서 초기 렌더링에 필요한 리소스만 포함됨
CRP는 성능 최적화의 핵심
초기 렌더링 과정을 빠르게 끝내기 위해서는 CRP에 포함되는 리소스를 최소화해야 함
동시에 이 경로에 필요한 리소스들을 최대한 빨리 제공해야 함
정리하면 렌더링은 반복되는 과정이며, Critical Rendering Path는 그 중에서 초기 페이지가 렌더링되는 그 순간까지 필요한 최소한의 흐름과 리소스를 의미함
이 경로들을 잘 이해하고 다루는 것이 빠른 초기 페이지 렌더링과 성능 개선의 핵심