작성중인 게시물입니다
Last Update : 7월 21(목) 17시
면접을 보고 정리를 해야겠다 해야겠다 생각하다가 이제야 정리하게 되는 굼벵이이다.
CRP란?
CRP란 Critical rendering path의 약자다. 중요 랜더링 경로라는 의미인데 프론트엔드 면접 질문에 많이 나와있는 브라우저 랜더링 과정의 답안이기도 하다.
1. HTML 을 파싱하여 DOM 트리를 만든다.
DOM 트리는 자바스크립트의 객체 형태로, 요소 노드(div, ul 태그와 같은 것) / 어트리뷰트노드( class, a태그의 href 등) / 텍스트 노드로 이루어져있다.
2. CSS를 파싱하여 CSSOM트리를 만든다.
Css는 head에 선언해주는 것이 좋다. ⏤ JS에서 로드하고 분석 할 때 CSS 가 필요한 경우가 있다. ⏤ CSS 파싱이 끝날 때 까지 파싱을 멈추게 만든다. ( JS 또한 CSS 이후 다운이 된다.) CSS 가 모두 파싱을 완료하면 HTML 파싱이 중단된 지점부터 다시 HTML 을 파싱한다.
3. Render Tree를 만든다.
페이지 랜더링을 위해 DOM 트리와 CSSOM 트리를 결합한다.
이때, 페이지에 보이지 않은 script 태그와 display:none 과 같은 노드들은 랜더 트리에 포함되지 않는다.
이후, 랜더 트리는 HTML 요소의 레이아웃을 계산하는데 사용된다.
4. Javascript 파싱
위에서 만들어진 DOM 은 조작이 가능하게끔 DOM API를 제공한다. script를 만났을 때 HTML 파싱은 중단되기 때문에 body 태그 밑에 둔다. 그리고 async 혹은 defer을 사용하여 비동기적으로 파싱 처리를 하게 된다.
HTML 이 DOM 트리, CSS가 CSSOM 트리를 만들었듯이 Javascript는 AST 를 만든다.
5. Reflow
- 레이아웃을 다시 계산하는 과정입니다.
6. Repaint
- 브라우저에 다시 paint하는 과정입니다.
7. Composite
composite 단계는 opacity와 transform에 의해 발생하는 병합 과정이다.
CRP 이해하고, 초기 랜더링 속도 최적화
- DOM API를 이용해 돔을 조작하는 일은 최대한 한번에 처리 될 수 있도록 한다.
- CSS 를 먼저 다운 받을 수 있도록 한다.
- 혹은 HTML 을 먼저 보여줄 수 있는 SSR이 가장 좋은 방법이다. JS는 번들링을 하여 최소화 하면 되기 때문에 (?)
추가적으로 Reflow와 Repaint에 대한 최적화
초기 랜더링 속도는 아니지만, 성능과 관련하여 얘기하자면, Reflow 와 Repaint 최소화해주어야 한다. Reflow 를 더 적게 일으켜야 한다.
CSS Triggers에서 Reflow와 Refaint를 일으키는 CSS 속성에 대해 확인할 수 있다. transform, opacitiy와 같은 속성들은 Reflow와 Repaint를 일으키지 않는다.
Reference |
[자바스크립트] 기본적인 웹 사이트 최적화 방법
