CRP

CRP란 브라우저가 서버로부터 HTML응답을 받아 화면에 그리기 위해 실행하는 일련의 과정을 뜻합니다. 총 6가지 단계로 구분하는데 이를 알고나면 리액트의 가상 DOM을 이해할 수 있으니, 다소 난해하더라도 반드시 읽으시길 권장드립니다.

그럼 이제 그 6단계를 차근차근 살펴봅시다.

1. DOM 트리 만들기

DOM트리란 완전하게 파싱된 HTML페이지의 Object표현입니다. 즉, 브라우저가 HTML스크립트를 받으면 다음처럼 트리구조로 변환하는 것이죠. 다음 코드를 살펴봅시다.

<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>

위 그림처럼 DOM트리는 HTML의 Element와 Text를 노드화 하여 Object화 하게 됩니다. 이 방법을 통해 브라우저는 HTML을 부분적으로 실행할 수 있으며, 문서 전체를 로드하는 것이 아닌 페이지 일부 내용을 차근차근 그려나가게 됩니다.

아주 옛날에 인터넷이 느릴때 화면 맨 위에서부터 천천히 아래로 렌더링 해나가는 모습이 이같은 구조때문이었죠.

2. CSSOM 트리 만들기

CSSOM은 DOM과 관련된 스타일을 트리화 한것으로 이해하면 됩니다. CSSOM은 DOM과 비슷한 방식으로 표현됩니다. 때문에, 다음 코드와 이미지를 보시면 쉽게 이해하실 수 있습니다.

body { font-size: 18px; }

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

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

footer { display: none; }

CSS는 렌더링을 차단하는 리소스입니다. 무슨말이냐면 DOM트리가 파싱되었다고 바로 브라우저에서 렌더링을 하는 게 아니라 CSS를 살펴보고 스타일을 입혀서 렌더링하게 된다는 거죠. 때문에 브라우저는 CSSOM트리가 완전히 완성되기 전 까지, 렌더링을 할 수 없습니다. 즉, CSS가 렌더링을 차단한다는 이야깁니다.

[참고로 CSS는 동일한 스타일에 대해 문서 뒷부분의 스타일이 우선권을 갖습니다. 사전 스타일을 덮어쓴다는 이야기죠. 참고하시면 좋습니다.]

CRP

1. DOM 트리 만들기

2. CSSOM 트리 만들기

3. JavaScript실행