[ JavaScript ] CRP (Critical Rendering Path)

람연 2021. 8. 5. 01:08

웹 브라우저는 url을 통해 서버에 요청을 하고 그에 따른 HTML응답을 받는다. 응답받은 HTML은 웹 페이지를 구성하는 여러 정보가 포함되어 있는데, 웹 브라우저는 어떤 과정을 거쳐 HTML을 웹 페이지로 표현하는지에 대해 정리한다.

CRP(Critical Rendering Path)

HTML은 웹 페이지를 구성하는 각 요소에 대한 정보와, CSS, JavaScript에 대한 정보를 포함하고있다. 하지만 그 내용은 평소 보던 웹 페이지와 많이 다르고 정보를 확인하기 어렵다. 또한 Javascript를 실행할 수 없기 때문에 HTML에 Javascript를 통해 구현한 여러 기능을 사용할 수 없다. 따라서 웹 브라우저에서 HTML을 웹 페이지로 변환하게 되는데, 이 과정을 CRP(Critical Rendering Path)라고 한다. CRP는 총 6단계로 나뉜다.

<html>
    <head>
        <title>My web title</title>
        <meta name="Author" content="Kidmei">	
        <style>
        div:nth-child(2){
            font-size:50px;
        }
        .class1 {
            color: FC2428;
        }
        .class2 {
            color: 0055FF;
        }
        </style>
    </head>
    <body>
        <div>
            <h1 class="class1">Subject</h1>
        </div>
        <div>
            <h2 style="font-size:25px;" class="class2">Subheading</h2>
            <p>Contents</P>
        </div>
        <div>
            <small>Footnote</small>
        </div>	
        <script>
                <!-- JavaScript -->
        </script>
    </body>
</html>

위 HTML은 CRP과정을 거치기 전 HTML으로 사람이 확인하기 어려운 구조로 되어있다. 또한 코드만으로는 JavaScript를 동작시킬 수 없다. 따라서 이러한 HTML을 웹 페이지로의 변환 과정이 필요한 것이다.

1. DOM Tree(Document Object Model Tree)

웹 브라우저는 가장 먼저 DOM Tree(Document Object Model Tree)를 구성한다. 루트 엘리먼트 <html>을 시작으로 각 엘리먼트에 대해 노드가 생성된다. 이때 엘리먼트 내에 중첩된 엘리먼트는 자식 노드로 생성되며, 각 노드는 해당 엘리먼트에 대한 속성이 포함된다. 만일 DOM Tree구성 중 <a>엘리먼트를 만났다면, <a>엘리먼트가 내포하고있는 href, onclick 등의 속성, 메소드를 <a>노드 각각 내포하게 되는것이다. DOM Tree의 가장 큰 특징은 W3C(World Wide Web Consortium)에 의해 표준화된 api를 제공하며, 이를 통해 DOM Tree의 모든 엘리먼트에 접근할 수 있다는 점이다.

<html>
    <head>
        <title>My web title</title>
        <meta name="Author" content="Kidmei">	
    </head>
    <body>
        <div>
            <h1 class="class1">Subject</h1>
        </div>
        <div>
            <h2 class="class2">Subheading</h2>
            <p>Contents</P>
        </div>
        <div>
            <small>Footnote</small>
        </div>
    </body>
</html>

위 HTML을 DOM Tree로 구성하면, 아래와 같이 생성된다.

HTML은 DOM Tree를 구성할때 부분적으로 실행이 가능하다. 따라서 콘텐츠를 페이지에 나타내기 위해 전체 문서를 로드할 필요가 없다는 특징이 있다. CRP과정으로 생성된 DOM을 HTML DOM이라고도 한다.

2. CSSOM Tree(Cascading Style Sheets Object Model Tree)

DOM Tree를 구성했다면, 그 다음으로 CSS정보를 통해 CSSOM Tree(Cascading Style Sheets Object Model Tree)를 구성한다. CSSOM Tree는 DOM Tree와 관련된 스타일 객체를 Tree구조로 생성하며, 각 노드는 관련된 스타일을 포함한다.

<html>
    <head>
        <title>My web title</title>
        <meta name="Author" content="Kidmei">	
        <style>
        div:nth-child(2){
            font-size:50px;
        }
        .class1 {
            color: FC2428;
        }
        .class2 {
            color: 0055FF;
        }
        </style>
    </head>
    <body>
        <div>
            <h1 class="class1">Subject</h1>
        </div>
        <div>
            <h2 style="font-size:25px;" class="class2">Subheading</h2>
            <p>Contents</P>
        </div>
        <div>
            <small>Footnote</small>
        </div>
    </body>
</html>

위 HTML을 CSSOM Tree로 구성하면, 아래와 같이 생성된다. CSS가 갖는 가장 큰 특징 중 하나는 계단식 상속이다. 순차적으로 CSSOM Tree를 구성하기 때문에 상속받은 CSS정보와 중복되는 CSS가 있을 수 있는데, 이러한 경우 기존의 CSS가 덮어씌어진다. 즉, 실제 CRP과정을 거쳐 화면에 표시되는 CSS는 마지막으로 적용한 값이 된다.

위 코드에서 선택자를 통해 두번째 div에 font-size속성을 50px으로 설정했다. 이는 CSSOM Tree구성 시 div의 자식노드 <h2>, <p>에 상속되며, font-size속성의 값이 50px로 적용된걸 확인할 수 있다. 이때 <h2>엘리먼트는 인라인 style으로 font-size속성의 값을 25px로 설정해 상속받은 font-size속성을 오버라이딩해 25px이 적용되었다.

이와 같이 CSS가 갖는 특징으로 인해, HTML처럼 따로 움직이지 못하는데 이는 CSSOM Tree가 완전히 구성되지 않았는데 렌더링을 진행하게 되면 잘못된 CSS가 적용될 수 있기 때문이다. 이러한 이유때문에 CSS는 '렌더링 차단 리소스'로 분류되며, CSSOM Tree가 완전히 구성될 때 까지 렌더링을 막는다.

3. JavaScript

JavaScript를 세 번째 단계로 정리했지만, 사실 JavaScript는 첫 번째 단계인 DOM 구성 중에 일어날 수 있다. 웹 브라우저는 CRP과정을 거치며 DOM Tree를 구성하는데 이때 <script>또는 외부 script참조 구문을 만나면, DOM Tree를 구성하던 작업이 중지되고 script가 먼저 실행된다. 이러한 특성 때문에 JavaScript는 '파서 차단 리소스'로 분류되며, HTML 작성 시 <script>는 각 엘리먼트에 대한 정의가 모두 끝난 뒤 마지막에 작성하는것을 권장한다.

<html>
    <head>
        <title>My web title</title>
        <meta name="Author" content="Kidmei">	
        <style>
        div:nth-child(2){
            font-size:50px;
        }
        .class1 {
            color: FC2428;
        }
        .class2 {
            color: 0055FF;
        }
        </style>
    </head>
    <body>
        <div>
            <h1 class="class1">Subject</h1>
        </div>
        <div>
            <h2 style="font-size:25px;" class="class2">Subheading</h2>
            <p>Contents</P>
        </div>
        <div>
            <small>Footnote</small>
        </div>
        <script>
	    	<!-- JavaScript -->
	</script>
    </body>
</html>

4. Render Tree

1, 2, 3 과정을 끝마치고 나면 웹 브라우저는 Render Tree를 구성한다. DOM Tree, CSSOM Tree를 기반으로 Render Tree가 구성되며 실제 웹 브라우저에 표현되는 정보를 갖고있다. Render Tree가 갖는 특징이 있다면, 숨겨진 요소는 포함되지 않는다는 점이다. 예를 들어 display: none 속성을 갖는 엘리먼트는 Render Tree에 포함되지 않는다.

개발자 도구 Elements탭에 표시되는 이 구조가 바로 Render Tree이다. 각 엘리먼트에 대해 정의한 DOM Tree와 CSS에 대해 정의한 CSSOM Tree에 대한 정보가 합쳐진 모습을 확인할 수 있다.

5. Layout

앞서 Render Tree까지 구성이 완료되었다면 웹 브라우저는 viewport를 설정한다. <head>영역에 <meta>를 통해 viewport의 크기를 정의할 수 있으며, 정의되지 않은 경우 viewport의 크기는 기본 980px로 지정된다. 통상 viewport값은 웹 브라우저를 사용하는 pc 모니터해상도에 따라 설정되도록 한다.

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

6. Paint

웹 브라우저는 CRP의 마지막으로 Paint단계를 거친다. Paint에서는 앞서 구성된 정보를 토대로, 웹 브라우저를 통해 실제 화면에 데이터를 표현한다. Paint단계에서 걸리는 시간은 CSS복잡도와 DOM크기에 따라 차이가 있다.

2021.08.01 - [JS] - [ JavaScript ] CSS (Cascading Style Sheets), 선택자

2021.07.18 - [JS] - [ JavaScript ] 하이퍼텍스트, HTML

'JS' 카테고리의 다른 글

[ JavaScript ] Promise (0)	2021.08.05
[ JavaScript ] CSS (Cascading Style Sheets), 선택자 (0)	2021.08.01
[ JavaScript ] 하이퍼텍스트, HTML (0)	2021.07.18
[ JavaScript ] BOM, window , DOM (0)	2021.06.18
[ JavaScript ] 웹 동작방식 (0)	2021.06.07

현재글[ JavaScript ] CRP (Critical Rendering Path)

상상코딩