단계
-
Document Object Model 트리 구축 (Constructing the DOM Tree)
- 브라우저는 HTML을 받아와서 DOM (Document Object Model) 트리라는 구조화된 표현을 만든다.
-
CSSOM 트리 구축 (Constructing the CSSOM Tree)
- 브라우저는 CSS를 받아와서 CSSOM (CSS Object Model) 트리라는 구조화된 표현을 만든다.
-
렌더 트리 생성 (Render Tree Construction)
- DOM 트리와 CSSOM 트리는 합쳐져서 렌더 트리를 생성한다. 렌더 트리는 화면에 실제로 표시될 노드들만을 포함한다.
-
레이아웃 (Layout)
- 렌더 트리가 생성되면, 브라우저는 각 노드의 위치와 크기를 계산하는 레이아웃 과정을 거친다. 이를 “reflow”라고도 한다.
-
페인팅 (Painting)
- 레이아웃 단계 후, 브라우저는 렌더 트리의 각 노드를 화면에 그리는 페인팅 과정을 시작한다. 여기에는 텍스트, 색상, 이미지, 그림자 등의 세부 요소 그리기가 포함된다.
최적화
CRP 최적화의 목적은 가능한 한 빠르게 웹 페이지를 렌더링하게 하는 것이다. 몇몇 전략적인 최적화 기법들은 다음과 같다.
-
CSS와 JavaScript의 최소화 및 압축
- 파일의 크기를 줄여 빠른 로딩을 도와줍니다.
-
인라인 CSS와 JavaScript의 사용 최소화
- 중요하지 않은 스타일이나 스크립트를 외부 파일로 분리하여 초기 렌더링을 가속화합니다.
-
비동기 스크립트 로딩
- async나 defer 속성을 사용하여 JavaScript의 실행을 지연시킴으로써 블로킹을 방지합니다.
-
중요한 CSS를 위쪽에 위치시키기
- 페이지의 위쪽 부분을 빠르게 렌더링하려면 중요한 스타일을 HTML 문서의 상단에 위치시켜야 한다.
-
웹 폰트 최적화
- 웹 폰트의 로딩 지연을 방지하기 위해 필요한 스타일만 불러오거나, font-display 옵션을 사용합니다.
-
CRP 최적화는 웹 성능 향상의 중요한 부분이며, 사용자 경험 향상에 큰 영향을 미친다.