브라우저가 페이지의 초기 출력을 위해 실행해야 하는 순서를 Critical Rendering Path(CRP)라고 합니다.

1. DOM 트리 구축
2. CSSOM 트리 구축
   • JavaScript 실행
3. 렌더 트리 구축
4. 레이아웃 생성
5. 페인팅
6. 병합과 최적화

Critical Rendering Path는 위의 6단계로 구성됩니다.

Critical Render Path 최적화

이번에 이야기할 렌더링 최적화는 브라우저의 도움을 받아 브라우저의 초기 출력을 빠르게 할 수 있는 방법에 관해 이야기할 것입니다. Critical Render Path 최적화란 HTML, CSS 및 JavaScript 간의 종속성을 이해하고 최적화하는 것을 말합니다.

Reflow & Repaint & Composition

CSS

JavaScript

리소스 우선순위 지정

Critical Rendering Path 측정하기

Critical Rendering Path 과정을 크롬의 DevTools로 확인할 수 있습니다. DevTools 의 Performance 탭에서 렌더링 성능을 측정할 수 있습니다.