Critical Rendering Path(CRP)

CRP이란

CRP은 브라우저가 HTML, CSS, JS를 변환하여 스크린으로 보여주는 과정을 의미합니다.

CRP을 최적화한다면 웹페이지의 성능을 크게 향상할 수 있다고 합니다.

과정

CRP은 그림에서 보다시피

Request/Response => loading => scripting => rendering => layout => painting으로 구분됩니다.

 

Requset/Response : 브라우저가 서버에게 요청/응답을 보냄

loading : 브라우저가 서버에서 파일 받아옴(html, css, js)

scripting : html파일을 DOM요소로, css 파일을 cssom요소로

(DOM : document object model)

(DOM + CSS = CSSOM)

rendering : DOM 과 CSSOM을 이용하여 최종적으로 Render Tree 생성

layout : 화면에 표기할 element들 사이즈, 위치 같은 거 계산

painting : 계산한대로 화면에 그리는 과정

 

Construction

여기서 Construction 과정은 DOM 트리를 만들고 CSSOM을 만들고, 최종적으로 Render Tree 생성을 의미합니다.

 

 

operation

operation 과정은 작성된 RenderTree를 기반으로 화면에 그리는 과정을 의미합니다.

 

 

핵심

Construction 과정에서 쓸데없는 태그를 줄여서 트리를 최소화 시켜서 웹페이지의 성능을 향상해야 한다!

Operation 과정에서 layout 재계산을 최소화 시켜야 한다.

(layout 변경이 일어 난다면 paint, composition 과정을 반복하게 됨)