Critical render path는 브라우저가 서버로부터 HTML 응답을 받아 화면에 그리기 위해 실행하는 과정입니다. CRP는 6단계를 거치며 각 단계는 다음과 같습니다.
- DOM 트리 만들기
- CSSOM 트리 만들기
- JavaScript 실행
- Render 트리 만들기
- 레이아웃 생성하기
- 페인팅
핵심만 요약하자면
- HTML 마크업을 처리하고 DOM 트리를 빌드 합니다.(DOM 파싱)
- CSS 마크업을 처리하고 CSSOM트리를 빌드 합니다. (CSS 파싱)
- DOM 및 CSSOM을 결합하여 렌더 트리를 형성합니다. (Attachment)
- 렌더 트리에서 레이아웃을 실행하여 각 노드의 기하학적 형태를 계산합니다.(Layout)
- 개별 노드를 화면에 페인트 합니다 (Painting)
이렇습니다. 위 5단계를 걸쳐 브라우저는 화면에 렌더링 하게됩니다.
이 과정을 이해하고 각 단계에서 어떤 일이 일어나는지 파악할 수 있어야 브라우저 렌더링 최적화를 통해 어플리케이션의 응답속도를 개선할 수 있습니다.
HTML 파싱
브라우저 주소창에 url을 입력하여 요청을 보내면 서버로부터 HTML문서를 받아오게 됩니다. 이걸 파싱하기 시작하면서 브라우저가 데이터를 화면에 그리는 과정이 시작됩니다.
참고로 파싱은 하나의 프로그램을 런타임환경이 실제로 행할 수 있는 내부 포맷으로 분석하고 변환하는 것을 의미합니다.
DOM 트리 만들기
DOM tree는 브라우저가 HTML 문서를 로드한 후 파싱하여 생성하는 모델을 의미합니다. 객체의 트리로 구조화되어 있기 때문에 DOM tree라 부릅니다.
- 브라우저는 읽어들인 바이트 데이터를 해당 파일에 지정된 인코딩에 따라 문자열로 바꿉니다.
- 바꾼 문자열을 다시 읽어서 HTML 표준에 따라 문자열을 토큰으로 변환합니다.
- 이렇게 만들어진 토큰을 다시 노드로 바꾸는 과정을 거칩니다 StartTag:html이 들어왔으면 EndTags:html을 만나기 전까지 들어오는 토큰들은 html 노드의 자식 노드로 넣는 식의 변환이 이루어집니다.
- 이 과정이 끝나면 DOM 트리가 완성됩니다.
CSSOM 트리 만들기
HTML을 파싱하다가 CSS 링크르르 만나면 CSS 파일을 요처애서 받아오게 됩니다. 받아온 CSS 파일은 HTML을 파싱한 것과 유사한 과정을 거쳐서 트리 형태의 CSSOM으로 만들어집니다.
CSS 파싱은 CSS 특성상 자식 노드들이 부모 노드의 특성을 계속해서 이어받는 규칙이 추가된다는 것을 빼고는 HTML 파싱과 동일하게 이루어집니다.
JavaScript 실행
JavaScript 파일을 만나면 해당 파일을 받아와서 실행할 때까지 파싱이 멈춥니다.
Render 트리 만들기
DOM과 CSSOM은 문서의 각기 다른 측면을 표현하는 서로 독립적인 객체입니다. 하나의 콘텐츠를 설명하고 하나는 문서에 적용되어야 하는 스타일 규칙을 설명합니다. 이 두가지를 병합하여 브라우저가 어떻게 화면에 픽셀을 렌더링하는지에 대한 정보를 가진 Render 트리를 만듭니다.
레이아웃 생성하기
지금까지 표시할 노드와 해당 노드의 스타일을 계산했습니다. 하지만 기기의 뷰포트 내에서 이러한 노드의 정확한 위치와 크기를 계산하지 않았습니다. 이를 계산하는 것이 레이아웃 단계입니다.
페인팅
마지막으로 표시되는 노드와 해당 노드의 스타일 및 기하학적 형태를 파악했으므로 렌더링 트리의 각 노드를 화면의 실제 픽셀로 변환합니다.
