CRP (Critical Rendering Path)
CRP 란 브라우저가 HTML, CSS, JavaScript 를 화면에 픽셀로 전환되는 일련의 단계를 말한다.
CRP 단계
웹 페이지에 대한 요청은 HTML 요청에서 시작된다.
서버는 HTML 포함한 응답을 보내고 브라우저는 HTML 구문 분석을 시작하여 수신된 bytes를 DOM 트리로 변환한다.
브라우저는 외부 자원(스타일 시트, 스크립트, 이미지 참조)에 대한 링크를 찾을 때마다 요청을 한다.
일부 자원은 차단되어 가져오는 자산이 처리될 때까지 나머지 HTML 구문 분석이 중지된다.
DOM 빌드가 완료되면 CSSOM을 구성한다.
DOM 과 CSSOM이 완료되면 브라우저는 렌더링 트리를 구축하여 표시되는 모든 콘텐츠의 스타일을 계산한다.
렌더링 트리가 완성되면 레이아웃이 발생하여 모든 렌더 트리 요소의 위치와 크기를 정의한다.
레이아웃까지 완료되면 페인팅 단계를 통해 화면에 그려지게 된다.
DOM (Document Object Model) 문서 객체 모델
DOM 은 브라우저가 HTML 문서를 객체로 표현한 것이다.
브라우저가 문서를 읽을 때는 HTML 문서를 위에서 아래로 차례대로 읽는다.
DOM 구성은 점진적인데, 태그를 만나면 startTag 와 endTag 같은 토큰으로 쪼개지게 된다.
각 토큰은 노드로 바뀌고 노드로 트리를 형성하게 된다.
1. html 코드 수신
<html>
<body>
<p>hello</p>
</body>
</html>- 토큰으로 변환
<html>- startTag(html)</html>- endTag(html)<body>-startTage(body)</body>- endTag(body)<p>- startTage(p)</p>- endTage(p)
- 노드 생성
- p 토큰은 p 노드가 되고 안에 hellow라는 텍스트 노드가 들어가게 된다
- 트리 생성
노드 수가 많을수록 CRP의 다음 이벤트가 더 오래걸리게 된다.
몇 개의 추가 노드는 큰 차이를 만들지 않지만 많은 노드를 추가하면 성능에 영향을 미칠 수 있다.
CSSOM (CSS Object Model) css 객체 모델
DOM 에는 페이지의 모든 콘텐츠가 있다면, CSSOM 에는 DOM의 스타일을 지정하는 방법에 대한 모든 정보가 있다.
-
렌더링 차단
CSS 는 나중에 등장하는 규칙이 이전 규칙을 덮을 수 있기 때문에 css 파일을 다 읽고 모든 우선순위를 고려한 뒤에야 최종 cssom이 확정된다.
css 가 완전히 파싱되기 전까지는 화면을 그릴 수 없다. -
css 파싱과 상속
css 도 DOM 처럼 토큰, 노드, 트리 순서에 따라 구성된다.
하위 노드는 부모 스타일을 상속 받을 수 있다.
body { font-family: Arial; }
p { color: blue; }<p> 는 color: blue 와 font-family: Arial 을 동시에 가진다.
- 선택자 성능
성능 측면에서 간단한 선택자가 더 빠른다.
foo {}는 브라우저가 DOM 에서.foo만 찾으면 되지만,
.bor .foo {}의 경우.foo를 찾은 후에 상위에 올라가.bar가 있는지 확인해야 된다.
하지만 이 과정은 microseconds 단위라서 실제 체감 성능에 거의 영향이 없으므로 css 최적화를 위해서는 선택자 성능보다는 css 파일 압축이나 필요없는 css 분리, 미디어 쿼리로 지연 로딩을 하는게 더 효과적이다.
Render Tree
Render Tree 는 실제로 화면에 그려질 요소와 스타일 정보만 담고 있는 트리이다.
브라우저가 Render Tree 를 생성할 때, DOM tree 루트부터 탐색하고 CSSOM과 매칭하면서 해당 DOM 노드에 어떤 css 규칙이 적용되는지 확인한다.
이때 head 같은 보이지 않는 노드는 제외되고 display: none 이 적용된 요소와 그 자식들도 제외된다.
Layout
Layout 단계에서는 Render Tree 를 기준으로 화면에서 어디에 위치하고 크기가 얼마나인지를 계산한다.
해당 단계에서 요소의 width, height, x, y 좌표 가 결정된다.
- 요소의 너비 계산
기본적으로 블록 요소는 부모 너비의 100% 를 가진다.
<div>hellow</div><div> 의 너비는 부모 컨테이너(예 <body>) 너비와 같다.
비율 또한 부모 컨테이너를 기준으로 한다
div { width: 50% }부모 컨테이너의 50% 너비를 차지한다.
- 성능 문제
DOM 노드가 많으면 레이아웃 계산 시간이 증가하고 스크롤, 애니메이션 중에 레이아웃이 자주 일어나면 프레임 드랍이 발생할 수 있다.
Paint
Layout 에서 계산된 각 요소의 크기, 위치, 스타일 정보를 바탕으로 실제 픽셀 단위로 화면에 그려주는 과정이다.
첫 로딩시에는 전체 화면을 페인팅하지만 변경 사항이 있을 때 브라우저는 성능 최적화를 위해 최소 영역만 다시 그리기(repaint) 한다.
Reflow
요소의 레이아웃 정보가 변경될 때 브라우저가 렌더 트리를 다시 계산하는 과정
Repaint
레이아웃 변화는 없지만 요소의 스타일(색상 등 시각적 요소) 가 바뀔 때 화면에 다시 그리는 과정
Reflow 이후에는 항상 Repaint 가 따라온다
