CRP(★Critical Rendering Path★)와 성능개선

 

| CRP(Critical Rendering Path)

 

서버에 HTML페이지를 요청하는 순간부터 브라우저가 내용을 화면에 표기하기까지의 단계를 Critical Rendering Path라고 부른다. 

   

 

| 렌더링 순서

크게

Construction 과정과  Operation 과정으로 나눌 수 있고,

 

세부적으로

DOM -> CSSOM -> Render Tree -> Layout -> Paint 의 과정을 거친다.

 

조금 더 세부적으로 살펴보면 

 

 

 Construction 과정

 

| request/response

    브라우저가 서버에게 HTML 파일 요청한다.

 

| loading, scripting

    HTML 파일 load 후 DOM요소로 변환(scripting)한다.

 

| rendering

    render tree 생성한다.

 

 

 

 Operation 과정

 

| layout

    rendering tree를 기반으로 레이아웃을 구상(x,y좌표와 너비,높이 등을 기반으로)한다.

 

| painting

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

 

    그런데 

    위에서 구상한 레이아웃을 바로 브라우저에 그리는 것이 아니라, 

    레이어 별로 paint를 준비해 놓는다.

 

    이 과정을 통해,

    어떤 요소에 변경 사항이 생겼을 때 최대한 적은 부분만 수정하도록 한다.

    따라서, 성능을 개선하는 데 아주 중요한 단계이다.

 

    (개발자가 css에 will-change속성을 주어 임의적으로 레이아웃을 따로 설정할 수도 있다.

    하지만, 위의 속성을 남발한다면? 오히려 레이어가 많이 만들어져 성능이 개선되지 않을 수 있다.)

 

| composite

    레이아웃이 계산되고 레이어순서대로 화면에 출력한다.

 

 

★Construction 과정

DOM 요소가 작으면 작을 수록 성능이 개선된다.

(불필요한 div, wrapper 사용을 자제)

 

★Operation 과정

최대한 paint가 자주 일어나지 않도록 하는 것이 성능을 개선하는 데 도움이 된다.

 

layout < paint < composite

(최악은 layout을 다시 그리는 과정)

 

 

*csstriggers 사이트를 통해 

어떤 속성을 사용하면 layout, paint 과정을 거치지 않을 수 있을 지,성능을 개선할 수 있는 속성들을 찾아볼 수 있다.  https://csstriggers.com/

 

 

 

참고 : 

https://aidencoders.com/critical-rendering-path/

드림코딩(프론트엔드 필수 브라우저 101 (자바스크립트 마스터 | 디버깅, 성능 분석, 실전 프로젝트 10개)편)