Critical Rendering Path (CRP)
CRP 는 Browser 가 서버로 부터 HTML 응답을 받아 화면을 그리기 위해 실행 되는 과정이다.
과정은 6단계로 나누어져 있다.
1. DOM Tree 만들기
2. CSSOM Tree 만들기
3. JavaScript 실행
4. Render Tree 만들기
5. Layout 생성하시
6. Painting위 과정을 살펴 보기 전에 CRP 에 대해서 먼저 이해 하는것이 좋다.
CRP 이해하기
웹 성능은 서버의 요청과 응답, 로딩, 스크립팅, 렌더링, 레이아웃 그리고 화면에 픽셀 그리기를 포함한다.
웹페이지 또는 어플리케이션에 대한 요청은 HTML 요청으로 시작된다. 서버는 응답 헤더 또는 데이터로 HTML 을 반환 한다. 그리고 나서 브라우저는 HTML 을 분석하고 수신된 바이츠를 DOM 트리로 변환하기 시작한다.
브라우저는 스타일시트, 스크립트 또는 포함된 이미지 참조인 외부 자원에 대한 링크를 찾을때마다 요청을 시작 한다.
불러온 에셋을 다룰 때까지 나머지 HTML 을 분석 작업하는 일부 요청은 중단며 차단 된다.
브라우저는 css 오브젝트 모델을 구축하는 작업이 끝날때까지 요청을 만들고 DOM 을 생성하는 HTML을 계속 분석 한다.
DOM 과 CSSOM 이 완료되면 브라우저는 렌더 트리를 생성하고 보여지는 컨테츠를 위해 스타일을 계산한다.
렌더트리가 완료된 후 모든 렌더 트리 요소들에 대한 위치와 크기가 정의된 레이아웃이 만들어진다. 일단 완료되면 페이지는 렌더링 되거나 또는 화면에 그려진다 (painted);
- DOM Tree 만들기
DOM Tree 는 완전히 파싱된 HTML 페이지의 Object 표현이다.
HTML 로 시작해서, 페이지의 각 element, text 에 대한 노드가 생성 된다. 다른 요소에 중첩된 요소는 자식 노드로 표시가 되고, 각 노드에는 해당 요소의 attribute 가 포함이 된다.
*출처 https://www.freecodecamp.org/news/what-is-the-dom-explained-in-plain-english/
- CSSOM Tree 만들기
CSSOM 은 DOM과 관련된 스타일의 Object 표현이다.
DOM 과 비슷한 방식이지만 선언, 상속 되었는지 와는 상관없이 각 노드에 대한 스타일이 포함된다.
- JavaScript 실행
자바스크립트 는 파서 차단 리소스 (Parser Blocking Resource) 로 간주 된다.
HTML 문서 자체의 파싱이 자바스크립트에 의 해서 차단된다.
이러한 이유로 자바스크립트 파일이 있을 경우 HTML 의 가장 끝에 파일을 위치시키는 것이 좋다.
파서가 내부 태그이든 외부 태그이든 상관 없이 script 태그에 도달하면 스크립트를 실행한다.
따라서 문서 내의 요소를 참조하는 자바스크립트 파일이 있는 경우 해당 문서가 표시된 후에 오도록 해야한다.
(자바스크립트가 파서를 차단 하는것을 피하기 위해서 async 속성을 사용 할 수도 있다. )
- Render Tree 만들기
Render Tree 는 DOM 과 CSSOM 을 합친 결과이고, 최종적으로 페이지에 렌더 되는 것이며, DOM Tree에 있는 것들 중에서 실제로 화면에 보이는 노드들로만 이루어진다.
만약 display:none 이라면 그 노드와 지식노드들은 Render Tree에 추가 되지 않는다.
- Layout 생성
Render Tree 가 만들어지고 나면 , 레이아웃은 가능해지며 화면의 크기에 의존한다. 레이아웃 단계는 요소들이 페이지에서 배치되는 위치와 방법, 각 요소의 너비와 높이 그리고 서로 관련된 위치를 결정 한다.
레이아웃은 뷰포트의 크기를 결정하며, 뷰포트의 크기는 뷰포트의 크기와 관련있는 CSS 스타일에 대한 컨텍스트를 제공한다. 뷰포트 크기는 meta 태그의 viewport 속성을 통해 결정되는데, 기본 뷰포트 너비는 980px 이다.
- Painting
마지막 단계인 Painting 은 화면에 픽셀을 그리는 것이다.
일단 렌더 트리가 생성되고 레이아웃이 나타나기 시작하면, 화면에 픽셀을 그릴수 있다. 로드시, 전체 화면을 그린다.
그 후에는 브라우저가 필요한 최소 영역만을 다시 글도록 최적화되어 있기 때문에 영향을 받는 영역만을 화면에 다시 그린다.
Painting 단계에서 소요되는 시간은 DOM 의 크기와 적용되는 스타일에 따라 다르며 복잡한 배경 이미지는 단순한 배경보다 더 많은 시간이 소요된다.
