Critical Rendering Path

Critical Rendering Path(CRP)는 브라우저가 HTML, CSS, JavaScript를 화면에 픽셀로 변환하는 일련의 단계입니다. 웹 성능 최적화의 핵심 개념으로, DOM, CSSOM, 렌더 트리, 레이아웃, 페인팅 과정을 이해하면 효과적인 최적화가 가능합니다.

CRP 전체 흐름

HTML 요청: 브라우저가 서버에 HTML을 요청하고, 응답을 받아 DOM 트리로 변환
외부 자원 요청: HTML 내에서 참조된 CSS, JavaScript, 이미지 등을 추가 요청
DOM과 CSSOM 생성: HTML과 CSS를 각각 분석하여 DOM 트리와 CSSOM을 생성
렌더 트리 생성: DOM과 CSSOM을 결합하여 렌더 트리 생성
레이아웃: 각 요소의 위치와 크기를 계산
페인팅: 최종적으로 화면에 요소들을 그림

DOM (Document Object Model)

DOM은 HTML 페이지의 구조를 나타내는 트리 형태의 데이터 구조입니다.

HTML 태그는 시작 태그와 끝 태그를 기준으로 **노드(Node)**로 변환
노드들이 계층적으로 연결되어 DOM 트리를 형성
DOM 트리는 점진적으로 형성됨
각 노드는 해당 HTML 요소에 대한 정보를 포함

DOM 트리의 위계를 잘 이해해야 복잡한 HTML 구조를 효율적으로 처리할 수 있습니다.

CSSOM (CSS Object Model)

CSSOM은 CSS 스타일 정보를 기반으로 한 트리입니다.

CSS 분석은 HTML과 달리 순차적으로 이루어짐
CSS의 규칙들이 상속 및 우선순위를 가지기 때문에 분석 순서와 방식이 중요

렌더링 차단

CSSOM이 완성되지 않으면 브라우저는 페이지 렌더링을 차단합니다. CSS 규칙이 페이지에 영향을 미칠 수 있기 때문에, 모든 스타일을 분석하고 적용해야만 렌더링이 가능합니다.

구체성 (Specificity)

CSS 선택자의 성능은 선택자의 구체성에 영향을 받습니다. 구체적인 선택자는 더 많은 계산을 요구합니다.

.foo {} → 단순하고 성능 좋음
.bar .foo {} → 더 복잡하고 성능에 부정적

가능한 한 덜 구체적인 선택자를 사용하는 것이 성능에 유리합니다.

렌더 트리 (Render Tree)

렌더 트리는 보여지는 콘텐츠만 포함하는 트리입니다.

<head> 섹션은 포함되지 않음
display: none 스타일이 적용된 요소는 포함되지 않음
DOM과 CSSOM을 결합하여 생성
브라우저가 페이지를 화면에 렌더링하기 위해 필요한 정보를 담고 있음

레이아웃 (Layout)

렌더 트리가 생성된 후, 페이지 요소들이 배치될 위치와 크기를 결정하는 단계입니다.

요소의 너비와 높이는 부모 요소 또는 뷰포트 너비에 의존
DOM 노드 수가 많으면 레이아웃 시간이 길어짐
스크롤이나 애니메이션에서 jank(버벅임)를 일으킬 수 있음

페인팅 (Paint)

픽셀을 화면에 그리는 단계입니다.

페이지 로드 시 전체 화면을 그림
이후에는 변경된 영역만 다시 그림 (리페인트)

정리

단계	설명	최적화 포인트
DOM 생성	HTML → 트리 구조	DOM 노드 수 최소화
CSSOM 생성	CSS → 스타일 트리	선택자 구체성 낮추기
렌더 트리	DOM + CSSOM 결합	불필요한 요소 제거
레이아웃	위치/크기 계산	레이아웃 트리거 최소화
페인팅	픽셀 그리기	변경 영역 최소화

CRP를 이해하면 CSS를 <head>에 배치하는 이유, JavaScript를 <body> 끝에 배치하는 이유, will-change나 transform을 사용한 최적화가 왜 효과적인지 이해할 수 있습니다.