CRP

Seung·2022년 2월 11일

CRP (Critical Rendering Path)

브라우저가 서버로부터 HTML 응답을 받아 화면을 그리기 위해 실행하는 과정
2단계 ~ 4단계 과정을 Construction 라고 한다 즉 브라우저가 이해할 수 있도록 DOM, CSSOM, Render Tree를 생성해서 브라우저만의 언어로 바꾸는 과정이다
5단계 ~ 7단계 과정을 Operation 라고 한다 즉 2~4단계에서 생성된 Render Tree를 이용해서 브라우저에 표시할 element의 위치, 크기 등을 계산하고 그림을 그리는 과정이다
아래 단계들은 하나씩 진행하는게 아닌 Scripting (DOM, CSSOM) -> Rendering (Render Tree) -> Layout (Layout) -> Painting (Paint, Composition)으로 grouping하여 진행한다

🥰DOM, CSSOM에 대한 자세한 설명은 제 velog에 있습니다🥰

🥰Render Tree에 대한 자세한 설명은 제 velog에 있습니다🥰

4단계에서 생성된 Render Tree의 정보를 기반으로 element의 위치, 크기 등을 계산하여 Layout을 구상하는 단계
기반이 되는 viewport의 크기를 결정하며 viewport의 크기는 meta 태그의 viewport 속성을 통해 결정된다 (기본 viewport 너비는 980px)
video, canvas, 3d, filter 관련 CSS 속성들, z-index 같은 것들은 새로운 layer로 만들어진다
Layout이 다시 발생하면 성능 개선에 최악이기 때문에 animation 사용시 Layout이 절대로 다시 발생 안하게 하자
Why ?
- Layout이 다시 발생한다 => Layer가 움직이면 다른 Layer들 위치도 다시 잡아야하고 결국 Paint도 다시 해야하기 때문에 당연히 성능이 나빠질 수 밖에 없다. 그래서 6~7단계 (Painting)에서 Layer가 웬만하면 안움직이게 만드는 것이 중요하다

5단계인 Layout이 끝나면 element가 어떻게 배치됐는지에 따라 element들을 Layer별로 나누어서 준비해놓는 단계 (실질적으로 브라우저에 표시하는건 7단계인 Composition에서 진행)
color, border-color 등의 작업을 진행하는 단계
6단계인 Paint에서 한번에 다 그리면 성능이 저하된다

DOM, CSS 크기가 작을수록 속도는 빨라지고 성능은 좋아지기 때문에 불필요한 div나 태그 등을 남용하지 않도록 하고 최대한 element들을 작게 만드는 것이 성능 개선의 ★Point★이다
Composition만 다시 발생되도록 하는것이 제일 좋은 성능 개선이고 Paint (Layer별로 나누는 단계)까지 다시 발생한다면 soso... 한 성능 개선이다.
- 그런데 Layout까지 다시 발생한다면....??
  퇴근이고뭐고 성능개선이나 하자,,
  Why ?
  - 예시로 특정요소 CSS에 will-change라는 속성을 이용하면 브라우저에게 특정 요소가 변화될수도 있음을 알려주고 브라우저는 그 특정요소를 새로운 Layer에 추가한다
  - will change를 남용한다면 브라우저가 필요없는 Layer를 계속 만들고 새로 만든 Layer를 다시 Paint, Composition 해줘야하기 때문에 성능 개선에 제일 최악이다
JavaScript를 이용해서 동적으로 값을 변경한다면 이미 그려진 Layer의 위치를 옮겨서 Composition만 하기 떄문에 Best 성능개선이라고 할 수 있다

👀 작은 Tip 👀
브라우저에서 Layer 확인하는 방법
1. 개발툴 상단 점 3개짜리 클릭
2. 도구 더보기 -> 레이어 클릭

😍 코드 지적은 언제나 환영입니다. 읽어주셔서 감사합니다. 😍

지적은 제 발전의 원동력입니다. 사소한 것이라도 지적해주세요 :)