Critical Render Path

브라우저가 화면을 그려내는 일련의 과정(순서)를 말할때, Critical Render Path라는 용어가 등장합니다. 우선 시작(0단계)은 브라우저(= 크롬, 사파리, 익스플로러 등등) 주소창에 url을 입력해서 요청을 보내면 서버로부터 HTML 문서를 받아옵니다.

• 파싱 - 1단계

  • HTML 파싱 → DOM 트리 생성
  • CSS 파싱 → CSSOM 트리 생성
    • CSS 파싱은, 응답으로 받은 HTML 문서에 CSS가 포함된 경우 진행됩니다

  

• 스타일 - 2단계

  • 자바스크립트 실행 + DOM + CSSOM → Render 트리 생성
    • DOM 트리와 CSSOM 트리를 매칭시켜 Render tree를 구성하게 됩니다
    • 여기서 Render tree는, 실제 화면에 그려질 트리를 말하는데, 예를 들면 visibilty: hidden은 공간을 차지하므로 렌더 트리에 포함되지만 display: none은 렌더 트리에서 제외됩니다

  

• Layout - 3단계

  • Render tree를 화면에 어떻게 배치할지 노드의 정확한 위치와 크기를 계산하는 단계
  • 루트 노드부터 순회하면서, 노드의 정확한 크기 및 위치를 계산하고, 이를 Render tree에 반영합니다
    • 만약 크기 값을 %로 지정하면 → 해당 단계에서 %값을 픽셀 단위로 변환합니다

• Paint - 4단계

  • Layout 단계에서의 계산된 값을 이용해 Render tree의 각 노드들을 화면 상의 실제 픽셀로 변환합니다

참고자료

브라우저 렌더링 과정 이해하기. (techcourse.co.kr)

React.js의 렌더링 방식 살펴보기 - 이정환 | 2023 NE(O)RDINARY CONFERENCE (youtube.com)