브라우저가HTML, CSS, JavaScript를 화면에 픽셀로 변환하는 일련의 과정을 말한다.
CRP를 최적화하면 첫 렌더링 시간을 향상할 수 있다.
브라우저는 서버로부터 데이터를 받아온 후, HTML을 파싱하여 DOM트리로 변환한다.
스타일시트, 스크립트, 임베드된 이미지 참조 등 외부 리소스에 대한 링크를 발견할 때마다 요청을 시작한다. 가져온 리소스가 처리될 때까지 나머지 HTML 파싱을 중단한다.
브라우저는 요청이 끝날 때까지 계속해서 HTML 구문 분석을 진행해 DOM을 구축하며 이 시점에서 CSSOM을 구성한다.
DOM과 CSSOM이 완성되면 렌더트리를 구축해 표시되는 모든 컨텐츠와 스타일을 정한다. 렌더트리가 완성되면 모든 요소의 위치와 크기를 정의하는 레이아웃이 발생한다. 이가 완료되면 페이지가 페인팅 된다.
DOM (Document Object Model)
HTML를 토큰으로 바꾸고 이를 노드로 바꾸고 이를 DOM트리로 만든다.
노드는 HTML 요소에 관한 모든 정보를 포함한다. DOM트리는 계층구조를 이룬다. 물리적으로 object 형태이다.
CSSOM (CSS Object Model)
DOM을 어떻게 스타일링 할지에 대한 모든 정보를 포함한다. DOM트리와 다르게 브라우저는모든 CSS를 수신하고 처리할 때까지 페이지 렌더링을 차단한다.왜냐하면 스타일은 이전에 정의된 스타일을 덮어씌울 수 있기 때문이다. 따라서 완전히 CSS 파싱이 끝나기 전까지 렌더트리에 포함하지 않는다.
Render Tree
DOM과 CSSOM을 합친 것이다. 브라우저는 DOM을 루트에서부터 순회하며 어떤 CSS를 붙일지 결정한다. 렌더트리는 보일 수 있는 컨텐츠만 감지한다. 예를 들어 head 섹션 내용은 보이지 않으므로 렌더트리에 들어가지 않는다.display:none;속성도 마찬가지이다.
렌더링 엔진은 더 나은 사용자 경험을 위해 가능하면 빠르게 내용을 표시하는데 모든 HTML을 파싱할 때까지 기다리지 않고 배치와 그리기 과정을 시작한다.
Layout
Layout은 스크린 사이즈에 의존성을 갖고있다.페이지에 요소들이 어떻게 어디에 위치할지와 크기를 결정한다.
노드가 많을 수록 레이아웃에 더 오랜 시간이 걸린다. 렌더 트리에 변경점이 생길 때 (노드를 추가하거나 컨텐츠를 바꾸거나 스타일을 변경하거나) 레이아웃이 발생한다.
