새싹2026년 2월 6일

브라우저 렌더링 파이프라인

#browser#performance#frontend#rendering

새싹2026년 2월 6일

브라우저 렌더링 파이프라인

#browser#performance#frontend#rendering

프론트엔드 개발자라면 반드시 알아야 하는 브라우저가 화면을 그리는 과정.

Critical Rendering Path

HTML을 받아서 픽셀로 그리기까지의 과정:

HTML → DOM → CSSOM → Render Tree → Layout → Paint → Composite

1. 파싱 (Parsing)

DOM 트리 생성: HTML을 파싱하여 Document Object Model 생성

<body>
  <div class="container">
    <p>Hello</p>
  </div>
</body>

CSSOM 트리 생성: CSS를 파싱하여 CSS Object Model 생성

.container {
  width: 100%;
}
p {
  color: black;
}

2. Render Tree

DOM + CSSOM을 결합하여 실제로 화면에 그려질 요소만 포함하는 트리 생성.

display: none 요소는 제외됨
visibility: hidden 요소는 포함됨 (공간 차지)

3. Layout (Reflow)

각 요소의 정확한 위치와 크기를 계산한다.

viewport 크기 기준으로 % 값 계산
박스 모델 계산 (margin, padding, border)
상대적 위치 계산

비용이 큰 작업이다. 한 요소가 바뀌면 자식, 형제, 부모까지 영향을 줄 수 있다.

4. Paint

계산된 레이아웃을 실제 픽셀로 그린다.

배경색, 테두리, 그림자
텍스트, 이미지
z-index에 따른 레이어 순서

5. Composite

여러 레이어를 합성하여 최종 화면을 만든다.

transform, opacity 등은 별도 레이어로 승격됨
GPU가 레이어 합성을 담당

성능 관점

각 단계를 트리거하는 CSS 속성이 다르다:

속성	Layout	Paint	Composite
`width`, `height`	O	O	O
`background-color`	-	O	O
`transform`	-	-	O
`opacity`	-	-	O

핵심: 애니메이션에는 transform과 opacity만 사용하라.

자세한 내용은 CSS 애니메이션 성능 최적화 참고.

Layout을 트리거하는 것들

요소 추가/제거
크기 변경 (width, height, padding, margin, border)
위치 변경 (top, left, position)
폰트 변경
창 크기 변경
offsetWidth, scrollTop 등 읽기 (강제 동기 레이아웃)

최적화 팁

DOM 조작 최소화: 여러 변경을 한 번에 적용 (DocumentFragment, classList)
강제 동기 레이아웃 피하기: 스타일 변경 후 즉시 레이아웃 속성 읽지 않기
will-change 활용: 브라우저에게 변경 예정 힌트 제공
transform으로 애니메이션: GPU 가속 활용

참고