CRP(critical rendering path)
웹 브라우저는 url을 통해 서버로 요청을 하고 그에 따른 HTML응답을 받는다.
응답받은 HTML은 웹 페이지를 구성하는 여러 정보로 이루어져 있는데 웹 브라우저는 HTML을 웹페이지로 표현할 떄 과정을 거친다.
CRP(critical rendering path)
HTML은 웹 페이지를 구성하는 요소에 대한 정보와 CSS, Javascript에 대한 정보를 포함하고 있다.
하지만 그 내용은 평소 보던 웹페이지와 많이 다르고, 정보를 확인하기 어렵다. 또한 javascript를 실행할 수 없기 떄문에 HTML에 Javascript를 통해 구현한 여러 기능을 사용 할 수 없다.
따라서 웹 브라우저에서 HTML을 웹 페이지로 표현하게 되는데 이 과정을 CRP라고 한다 . CRP는 총 6단계로 구성된다.
1.DOM TREE
웹 브라우저는 가장 먼저 DOM tree를 구성한다. 루트 엘리먼트인 <html>을 시작으로 각 엘리먼트에 대한 노드가 생성된다.
이떄, 엘리먼트 내에 중첩된 엘리먼트는 자식 노드로 생성되고, 각 노드는 해당 엘리먼트에 대한 속성을 포함한다.
만약 DOM TREE구성 중 <a>엘리먼트를 만난다면 <a>가 갖고있는 속성, 메소드를 <a>노드 각각 내포하게 된다.
DOM Tree의 특징은 W3C에 의해 표준화된 API를 적용하며 이를 통해 DOM Tree의 모든 요소에 접근 할 수 있다.
2.CSSOM Tree
DOM Tree를 구성했다면, 그 다음 CSS정보를 통해 CSSOM Tree(Cascading Style Sheets Object Model Tree)를 구성한다. CSSOM Tree는 Dom Tree와 관련된 스타일 객체를 Tree구조로 생성하며, 각 노드는 관련된 스타일을 포함한다.
3.Javascript
웹 브라우저는 crp과정을 거치며 Dom tree를 구성하는데 이떄 <script>또는 외부 script 참조구문을 만난다면 Dom tree를 구성하는 과정이 중지되고, script가 먼저 실행된다.
이러한 특성 떄문에, html작성 시 <script>는 각 엘리먼트에 대한 정의가 모두 끝난 후 마지막에 작성하는 것을 권장한다.
4.Rendering Tree(랜더링 트리)
1,2,3과정을 모두 끝낸 후 웹 브라우저는 랜더링 트리를 구성한다. 랜더링 트리는 DOM과 CSSOM을 모두 합친 후 최종적으로 브라우저에 표시될 것만 선별하고 생성한다.
랜더트리는 실제 화면에 표시되는 노드들로만 구성된다.
랜더트리를 구성하기 위해 브라우저는 다음 과정을 거친다.
1) DOM트리의 루트부터 시작하여 각 노드를 순회한다.
2) 보이지 않는 노드를 생략한다.
3) 표시되는 각 노드에 대해 적절하게 일치되는 CSSOM 규칙을 찾아서 적용한다.
4) 계산된 스타일과 함께 보이는 노드를 내보낸다
5) 마지막으로 화면에 계산된 스타일을 포함한 랜더트리를 내보낸다.
5.Layout
랜더링 트리까지 구성했다면 웹 브라우저는 뷰포트를 설정한다. <head>영역에 있는 <meta>태그를 통해 viewport의 크기를 지정할 수 있으며, 정의되지 않는 경우 기본 viewport의 크기는 980px이다.
6.Paint
웹 브라우저는 CRP의 마지막으로 Paint과정을 거친다. Paint에서는 앞서 구성된 정보를 토대로, 웹 브라우저를 통해 실제 화면에 데이터를 표현한다.