CRP 이해하기

웹 성능은 서버의 요청과 응답, 로딩, 스크립팅, 렌더링, 레이아웃 그리고 화면에 픽셀 그리기를 포함합니다.

웹 페이지 또는 어플리케이션에 대한 요청은 HTML 요청으로 시작됩니다. 서버는 응답 헤더 또는 데이터로 HTML을 반환합니다. 그리고 나서 브라우저는 HTML을 분석하고 수신된 바이트를 DOM 트리로 변환하기 시작합니다.

브라우저는 스타일시트, 스크립트 또는 포함된 이미지 참조인 외부 자원에 대한 링크를 찾을때마다 요청을 시작합니다. 불러온 에셋(assets)을 다룰 때까지 나머지 HTML을 분석 작업하는 일부 요청은 중단되며 차단됩니다. 브라우저는 CSS Object Model(CSSOM)을 구축하는 작업이 끝날 때까지 요청을 만들고 DOM을 생성하는 HTML을 계속해서 분석합니다.

DOM과 CSSOM이 완료되면 브라우저는 Render Tree를 생성하고 보여지는 컨텐츠를 위해 스타일을 계산합니다. Render Tree가 완료된 후 모든 Render Tree 요소들에 대한 위치와 크기가 정의된 레이아웃이 만들어집니다. 일단 완료되면 레이지는 렌더링되거나 또는 화면에 '그려집니다(painted)'.