critical rendering path란

critical rendering path란?

• 브라우저가 HTML, CSS, JavaScript를 화면에 픽셀로 변환하는 일련의 과정을 말한다.
• CRP를 최적화하면 첫 렌더링 시간을 향상할 수 있다.
• 브라우저는 서버로부터 데이터를 받아온 후, HTML을 파싱하여 DOM트리로 변환한다.
  • 스타일시트, 스크립트, 임베드된 이미지 참조 등 외부 리소스에 대한 링크를 발견할 때마다 요청을 시작한다. 가져온 리소스가 처리될 때까지 나머지 HTML 파싱을 중단한다.
  • 브라우저는 요청이 끝날 때까지 계속해서 HTML 구문 분석을 진행해 DOM을 구축하며 이 시점에서 CSSOM을 구성한다.
• DOM과 CSSOM이 완성되면 렌더트리를 구축해 표시되는 모든 컨텐츠와 스타일을 정한다. 렌더트리가 완성되면 모든 요소의 위치와 크기를 정의하는 레이아웃이 발생한다. 이가 완료되면 페이지가 페인팅 된다.

DOM (Document Object Model)

• HTML를 토큰으로 바꾸고 이를 노드로 바꾸고 이를 DOM트리로 만든다.
• 노드는 HTML 요소에 관한 모든 정보를 포함한다. DOM트리는 계층구조를 이룬다. 물리적으로 object 형태이다.

CSSOM (CSS Object Model)

• DOM을 어떻게 스타일링 할지에 대한 모든 정보를 포함한다. DOM트리와 다르게 브라우저는 모든 CSS를 수신하고 처리할 때까지 페이지 렌더링을 차단한다. 왜냐하면 스타일은 이전에 정의된 스타일을 덮어씌울 수 있기 때문이다. 따라서 완전히 CSS 파싱이 끝나기 전까지 렌더트리에 포함하지 않는다.

Render Tree

• DOM과 CSSOM을 합친 것이다. 브라우저는 DOM을 루트에서부터 순회하며 어떤 CSS를 붙일지 결정한다. 렌더트리는 보일 수 있는 컨텐츠만 감지한다. 예를 들어 head 섹션 내용은 보이지 않으므로 렌더트리에 들어가지 않는다. display:none; 속성도 마찬가지이다.
• 렌더링 엔진은 더 나은 사용자 경험을 위해 가능하면 빠르게 내용을 표시하는데 모든 HTML을 파싱할 때까지 기다리지 않고 배치와 그리기 과정을 시작한다.

Layout

• Layout은 스크린 사이즈에 의존성을 갖고있다. 페이지에 요소들이 어떻게 어디에 위치할지와 크기를 결정한다.
• 노드가 많을 수록 레이아웃에 더 오랜 시간이 걸린다. 렌더 트리에 변경점이 생길 때 (노드를 추가하거나 컨텐츠를 바꾸거나 스타일을 변경하거나) 레이아웃이 발생한다.

Paint

• 렌더트리가 생성되고 레이아웃이 발생하면 스크린에 픽셀들이 그려진다.

참고문서

• MDN - Critical rendering path
• Critical Rendering Path란?
• web.dev - Render-tree Construction, Layout, and Paint