Critical Rendering Path란?

2017-10-15 18:03

javascript browser critical rendering path dom cssom

Front-end developer WONISM
Interested in ReactJS, RxJS and ReasonML.

이 글은 Ire Aderinokun의 허락을 받고 Understanding the Critical Rendering Path라는 글의 일부를 번역한 것이다.

Critical Rendering Path(CRP)는 브라우저가 서버로부터 HTML 응답을 받아 화면을 그리기 위해 실행하는 과정이다.
CRP는 6단계를 거치며 각 단계는 다음과 같다.

DOM 트리 만들기
CSSOM 트리 만들기
JavaScript 실행
Render 트리 만들기
레이아웃 생성하기
페인팅

DOM 트리 만들기

DOM 트리는 완전하게 파싱된 HTML 페이지의 Object 표현이다.
html로부터 시작되어, 페이지의 각 element, text에 대한 노드가 만들어진다.
다른 요소 내에 중첩된 요소는 자식 노드로 표시되며, 각 노드에는 해당 요소의 특성(attribute)이 포함된다.

이 예제 코드는 아래 이미지와 같은 DOM 트리를 구성한다.

<html>
<head>
  <title>Understanding the Critical Rendering Path</title>
  <link rel="stylesheet" href="style.css">
</head>
<body>
  <header>
    <h1>Understanding the Critical Rendering Path</h1>
  </header>
  <main>
    <h2>Introduction</h2>
    <p>Lorem ipsum dolor sit amet</p>
  </main>
  <footer>
    <small>Copyright 2017</small>
  </footer>
</body>
</html>

HTML은 부분적으로 실행될 수 있으며, 페이지에 내용이 표시되기 위해 문서 전체를 로드할 필요가 없다. 하지만, CSS와 JavaScript는 페이지의 렌더링을 차단할 수 있다.

CSSOM 트리 만들기

CSSOM은 DOM과 관련된 스타일의 Object 표현이다.
CSSOM은 DOM과 비슷한 방식으로 표현되지만, (명시적으로) 선언되었는지 (암시적으로) 상속되었는지 상관없이 각 노드에 대한 스타일이 포함된다.

위 HTML 예제 코드에서 포함된 style.css는 다음과 같다고 가정하며, 이는 아래 이미지와 같은 CSSOM 트리를 구성한다.

body { font-size: 18px; }

header { color: plum; }
h1 { font-size: 28px; }

main { color: firebrick; }
h2 { font-size: 20px; }

footer { display: none; }

CSS는 렌더링을 차단하는 리소스로, 완전히 파싱되지 않으면 Render 트리를 구성할 수 없다. HTML과 달리 CSS는 상속된 계단식 특성때문에 부분적으로 실행될 수 없으며, 문서의 뒷부분에 정의된 스타일은 이전에 정의된 스타일을 덮어쓰게된다.

(CSS전체가 파싱되기 전에 먼저 스타일 시트에 정의한 CSS스타일을 사용하면, 잘못된 CSS가 적용되는 상황이 발생할 수 있다. 하지만, 완전히 파싱되기 전까지 렌더링을 차단함으로써 이와 같은 일이 일어나지 않는다.)

<link rel="stylesheet" /> 태그는 미디어 속성을 받을 수 있고, 미디어 속성은 스타일이 적용되는 미디어쿼리를 지정할 수 있다. 만약, 미디어 속성이 orientation: landscape 인 스타일 시트가 있고, 페이지를 세로모드로 보고있는 경우 해당 리소스는 렌더링 블로킹으로 간주되지 않는다. CSS는 스크립트 블로킹일수도 있다. 왜냐하면, JavaScript 파일은 실행되기 전에 CSSOM이 생성되는 것을 기다려야 하기 때문이다.

JavaScript 실행

JavaScript는 파서 차단 리소스로 간주된다. 이것은 HTML 문서 자체의 파싱이 JavaScript에 의해 차단된다는 뜻이다.

파서가 내부 태그이든 외부 태그이든 <script> 태그에 도달하면, (외부 태그라면, 외부 스크립트를 가져오고) 스크립트를 실행한다. 따라서 문서 내의 요소를 참조하는 JavaScript파일이 있는 경우, 해당 문서가 표시된 후에 오도록 해야한다.

JavaScript가 파서를 차단하는 것을 피하기 위해 async 속성을 사용할 수도 있다.

Render 트리 만들기

Render 트리는 DOM 과 CSSOM 이 합쳐진 것으로 페이지에서 최종적으로 렌더링할 내용을 나타내는 트리이다. display: none; 으로 숨겨진 요소는 포함되지 않는다.
위의 DOM, CSSOM 예제 코드는 다음 렌더 트리를 생성한다.

레이아웃 생성하기

레이아웃은 뷰포트의 크기를 결정하며, 뷰포트의 크기는 뷰포트의 크기와 관련있는 CSS 스타일에 대한 컨텍스트를 제공한다. 뷰포트 크기는 <meta> 태그의 viewport 속성을 통해 결정되는데, 기본 뷰포트 너비는 980px 이다.

(일반적으로 메타태그의 뷰포트 값은 장치 너비에 맞게 설정한다.)

<meta name="viewport" content="width=device-width,initial-scale=1">

페인팅

그리는 단계에서는 페이지의 가시적인 내용을 픽셀로 변환하여 화면에 표시한다.

페인팅 단계에서 소요되는 시간은 DOM의 크기와 적용되는 스타일에 따라 다르다. (예를 들면, 복잡한 gradient 배경은 단순 배경색보다 더 많은 시간이 소요된다.)

Reference

Understanding the Critical Rendering Path