Critical Rendering Path

Critical Rendering Path(CRP)는 HTML, CSS, JavaScript를 화면의 픽셀로 변환하기 위해 브라우저가 거치는 과정입니다. 앞으로 CRP로 축약해서 사용하겠습니다.

CRP에는 Document Object Model(DOM), CSS Object Model(CSSOM), Render tree 및 Layout이 있습니다.

1. HTML을 서버에게 받은 후, 파싱을 해서 DOM(Document Object Mode) 트리 구축

2. HTML에 링크된 CSS 파싱 후, CSSOM(CSS Object Model) 트리 구축
-> CSS는 렌더링 차단 리소스이므로 파싱 중에는 렌더링이 차단된다.
-> 이는 CSS가 Cascade의 속성을 가졌기 때문이다.

3. JavsScript 실행

-> HTML 중간에 스크립트가 있다면 HTML 파싱이 중단된다.
-> async 속성을 통해 비동기적으로 로드할 수 있다.

4. DOM과 CSSOM을 조합하여 렌더트리(Render Tree) 구축

-> display:none 속성과 같이 화면에서 보이지도 않고 공간을 차지하지 않는 것은 렌더트리로 구축되지 않는다.

5. 뷰포트 기반으로 렌더트리의 각 노드가 가지는 정확한 위치와 크기 계산 (Layout/Reflow 단계)
-> viewport의 크기는 meta viewport 태그에 의해 결정되거나 기본 viewport 크기가 사용된다.

6. 계산한 위치/크기를 기반으로 화면에 그림(Paint 단계)

참고 :

OO 하는 개발자