Critical Render Path
브라우저가 화면을 그려내는 일련의 과정(순서)를 말할때, Critical Render Path라는 용어가 등장합니다.
우선 시작(0단계)은 브라우저(= 크롬, 사파리, 익스플로러 등등) 주소창에 url을 입력해서 요청을 보내면 서버로부터 HTML 문서를 받아옵니다.
•
파싱 - 1단계
◦
HTML 파싱 → DOM 트리 생성
◦
CSS 파싱 → CSSOM 트리 생성
▪
CSS 파싱은, 응답으로 받은 HTML 문서에 CSS가 포함된 경우 진행됩니다
•
스타일 - 2단계
◦
자바스크립트 실행 + DOM + CSSOM → Render 트리 생성
▪
DOM 트리와 CSSOM 트리를 매칭시켜 Render tree를 구성하게 됩니다
▪
여기서 Render tree는, 실제 화면에 그려질 트리를 말하는데, 예를 들면 visibilty: hidden은 공간을 차지하므로 렌더 트리에 포함되지만 display: none은 렌더 트리에서 제외됩니다
•
Layout - 3단계
◦
Render tree를 화면에 어떻게 배치할지 노드의 정확한 위치와 크기를 계산하는 단계
◦
루트 노드부터 순회하면서, 노드의 정확한 크기 및 위치를 계산하고, 이를 Render tree에 반영합니다
▪
만약 크기 값을 %로 지정하면 → 해당 단계에서 %값을 픽셀 단위로 변환합니다
•
Paint - 4단계
◦
Layout 단계에서의 계산된 값을 이용해 Render tree의 각 노드들을 화면 상의 실제 픽셀로 변환합니다