Critical Render Path란?

HYUK·2023년 1월 23일

1. Critical Render Path

Critical Render Path 쉽게 이야기하면 브라우저 랜더링 과정이라고 할 수 있다. 이 과정을 이해하고 각 단계에서 어떤 일이 일어나는지 파악할 수 있어야 브라우저 렌더링 최적화를 통해 어플리케이션의 응답속도를 개선할 수 있다.

2. Critical Render Path 과정

HTML 데이터 파싱
Dom 트리 만들기
CSSOM 트리 만들기
JavaScript 실행
Render 트리 만들기
레이아웃 생성하기
페인팅

2-1. HTML 데이터 파싱

브라우저 주소창에 url을 입력하여 요청을 보내면 서버로부터 HTML 문서를 받아오게 된다. 이걸 파싱하기 시작하면서 브라우저가 데이터를 화면에 그리는 과정이 시작된다.

2-2. Dom 트리 만들기

DOM tree는 브라우저가 HTML 문서를 로드한 후 파싱하여 생성하는 모델을 의미한다. 객체의 트리로 구조화되어 있기 때문에 DOM tree라 부른다.

문서 노드(document node) : DOM의 진입점(시작점)으로 트리의 최상위에 존재한다.
요소 노드(element node) : 태그, HTML 요소
어트리뷰트 노드(attribute node) : 요소의 자식이 아닌 요소의 일부로 표현된다. 그래서 해당 요소 노드를 찾아 접근하면 어트리뷰트를 참조, 수정이 가능
텍스트 노드(text node) : 요소 내의 문자열. 자식 노드를 가질 수 없고, 트리의 끝에서 잎 노드가 된다.
주석 노드(comment node)

2-3 CSSOM 트리 만들기

웹 사이트를 브라우저 상에 표현할 때 서버로부터 받은 정보를 브라우저가 렌더링 엔진을 통해 파싱 하는데 이때 두 가지 요소를 파싱 하는데 하나는 HTML 또 하나는 CSS입니다.
이때 HTML을 파싱 하여 자료를 구조화한 것을 DOM이라 하고 CSS 내용을 파싱 하여 자료를 구조화한 것을 CSSOM이라 합니다.

2-4 JavaScript 실행

JavaScript 파일을 만나면 해당 파일을 받아와서 실행할 때까지 파싱이 멈춘다. 따라서 문서 내의 요소를 참조하는 JavaScript 파일이 있는 경우 해당 문서가 표시된 후에 배치해야 한다.

2-5 Render 트리 만들기

렌더 트리는 DOM과 CSSOM을 합한 후 최종적으로 브라우저에 표기될 것들만 렌더 트리에 선별 되어 생성이 된다. 이 렌더 트리는 표시되는 각 요소의 레이아웃을 계산하는 데 사용되고 픽셀을 화면에 렌더링하는 페인트 프로세스에 대한 입력으로 처리가 된다. 최적의 렌더링 성능을 얻기 위해 이러한 단계를 이해하고 각각을 최적화하는 것이 중요합니다.

2-6 레이아웃 생성하기

Render Tree가 완성된 후, 모든 Render Tree 요소들에 대한 위치와 크기가 정의된 Layout이 만들어진다. 보여질 컨텐츠를 위해 각각의 요소들이 페이지에서 배치되는 위치와 방법, 각 요소의 너비와 높이 그리고 서로 관련된 위치를 결정하기 위해스타일을 계산한다.