브라우저가 화면에 나타나는 요소를 렌더링하기 위해선 CRP(Critical Rendering Path라는 프로세스를 사용한다. CRP는 다음과 같은 단계로 구성되어있다.
1. HTML 파싱 → DOM 트리 구축
2. CSS 파싱 → CSSOM 트리 구축
CSS는 렌더링 차단 리소스(Render blocking resource). HTML과 달리 CSS는 계단식 상속 특성을 갖고 있어 부분적으로 실행될 수 없기 때문에 먼저 리소스를 완전히 파싱하지 않으면 렌터링 트리를 구성할 수 없음.
3. JS 실행
JS는 파서 차단 리소스 (Parser blocking resource).
HTML 중간에 JS 호출 시 HTML 파싱이 중단된다. 따라서 HTML 바디부분 가장 아래에 JS를 불러오는 것이 좋다.
파싱이 차단되는것을 피하기 위해 async속성을 적용해 비동기적으로 로드 가능하다.
https://developer.mozilla.org/ko/docs/Web/HTML/Element/script
4. DOM 과 CSSOM을 조합해 렌더 트리(Render tree) 구축
display: none 속성과 같이 화면에서 보이지도 않고 공간을 차지하지 않는 속성들은 렌더트리로 구축되지 않는다.
5. 뷰 포트를 기반으로 렌더트리의 각 노드가 위치해야할 곳과 노드가 표시 될 크기를 계산함. (Rayout/ Reflow 단계)
뷰포트의 크기는 문서 헤드에 제공된 메타 뷰포트 태그에 의해 결정 , 태그가 제공되지 않으면 기본 뷰포트 너비인 980px이 사용됨.
가장 일반적인 메타 뷰포트값은 뷰포트의 크기를 장치의 너비에 맞추는 것
<meta name="viewport" content="width=device-width,initial-scale=1"> 6. 페이지의 가시적인 내용을 픽셀로 변환하여 계산한 위치 / 크기를 기반으로 화면에 그림 (Paint 단계)
페인트 단계에서 처리에 걸리는 시간은 DOM크기와 적용되는 스타일에 따라 다름.
DevTool에서 CRP가 어떤 순서로 작동되는지 확인 할 수 있다.
<작업 순서>
-
Send Request - index.html에 대한 GET 요청 전송
-
Parse HTML and Send Request - HTML 및 DOM 구문 분석을 시작. style.css 및 main.js에 대한 GET 요청
-
Parse Stylesheet - CSSOM이 style.css 용으로 생성
-
Evaluate Script - main.js 평가
-
Layout - HTML의 메타 뷰포트 태그를 기반으로 레이아웃 생성
-
Paint - 문서의 픽셀을 페인트
이걸 알아야하는 이유? CRP를 최적화하는 방법을 결정할 수 있기 때문에
참고 : https://blog.asamaru.net/2017/05/04/understanding-the-critical-rendering-path/
