# [[렌더링 파이프라인(Rendering Pipeline)|렌더링 파이프라인(Rendering Pipeline]]

## 📌 Brief Summary
렌더링 파이프라인은 브라우저가 화면에 픽셀을 그리기 위해 DOM과 [[CSSOM|CSSOM]] 트리를 생성한 후, 렌더 트리를 구축하고 레이아웃 및 페인트 등의 과정을 거치는 일련의 렌더링 경로를 의미합니다 [1]. DOM 요소에 변경이 발생할 경우 브라우저는 스타일 재계산, 레이아웃(리플로우), 페인트(리페인트), 컴포지트 단계로 구성된 픽셀 파이프라인을 실행합니다 [2]. 유지보수 가능하고 성능이 뛰어난 CSS 아키텍처를 설계하려면, 이 파이프라인에 부하를 주는 리플로우와 리페인트를 최소화하여 프론트엔드의 렌더링 성능을 최적화해야 합니다 [3, 4].

## 📖 Core Content
*   **파이프라인의 주요 단계**
    *   브라우저는 렌더링을 위해 먼저 [[DOM (Document Object Model)|DOM(Document Object Model]] 트리와 [[CSSOM(CSS Object Model)|CSSOM(CSS Object Model]] 트리를 필요로 하며, 이 둘이 결합되어 렌더 트리를 생성한 후 레이아웃과 페인트 단계를 거치게 됩니다 [1].
    *   DOM 요소에 변화가 생길 때 브라우저는 '픽셀 파이프라인'을 거치며, 이는 1. 스타일 재계산(Recalculate Style), 2. 레이아웃(Layout/Reflow), 3. 페인트(Paint/Repaint), 4. 컴포지트(Composite)의 순서로 동작합니다 [2].

*   **리플로우(Reflow)와 리페인트(Repaint)의 차이 및 비용**
    *   **리플로우 (Layout):** 요소의 너비, 높이, 여백(margin), 위치 등 기하학적 구조에 영향을 주는 속성이 변경될 때 발생합니다 [5, 6]. 특정 요소에서 리플로우가 발생하면 해당 요소뿐만 아니라 자식, 조상 및 DOM 트리에서 뒤따르는 다른 요소들까지 다시 레이아웃을 계산해야 하므로 브라우저 성능에 매우 큰 비용을 초래합니다 [7, 8]. 
    *   **리페인트 (Paint):** 요소의 배경색, 윤곽선, 그림자(box-shadow) 등 레이아웃에 영향을 주지 않는 시각적 요소(스킨)가 변경될 때 발생합니다 [6, 7]. 리플로우보다는 성능 비용이 낮지만 여전히 렌더링 자원을 소모합니다 [6, 7].

*   **성능 최적화 및 렌더링 파이프라인 관리 방법**
    *   **GPU 가속 활용:** `transform` 및 `opacity` 속성을 사용하여 애니메이션을 구현하면 비싼 레이아웃과 페인트 단계를 건너뛰고 컴포지트(Composite) 단계만 트리거하여 GPU 가속을 받을 수 있습니다 [9-11]. 
    *   **DOM 업데이트 일괄 처리:** [[JavaScript|JavaScript]]를 통해 개별적으로 여러 인라인 스타일을 설정하는 것을 피하고, CSS 클래스를 변경하거나 `documentFragment` 등을 이용해 DOM 조작을 일괄 처리(batch)하여 리플로우 횟수를 줄여야 합니다 [4, 12, 13].
    *   **레이아웃 스래싱([[Layout Thrashing|Layout Thrashing]]) 방지:** DOM에서 값을 읽고(read) 쓰는(write) 작업을 번갈아 연속적으로 실행하면 브라우저가 강제로 동기적 리플로우를 수행해야 하므로 프레임 속도가 저하됩니다. 읽기와 쓰기 작업은 반드시 분리해야 합니다 [4, 14].
    *   **CSS 및 렌더링 차단 최소화:** 사용되지 않는 CSS를 제거하고, 복잡한 선택자 사용을 피하며, 미디어 쿼리를 사용해 중요하지 않은 스타일(예: 인쇄용 스타일)의 로드를 분리함으로써 초기 렌더 차단을 최적화해야 합니다 [13, 15, 16].
    *   **will-change와 requestAnimationFrame:** 애니메이션은 `requestAnimationFrame`을 사용하여 브라우저의 리페인트 주기에 동기화해야 하며, 자주 변경될 요소에는 `will-change` 속성으로 브라우저에 힌트를 주어 렌더링을 최적화할 수 있습니다 [14, 17].

## 🔗 Knowledge Connections
- **Related Topics:** [[Reflow 및 Repaint 최적화|Reflow 및 Repaint 최적화]], CSS 애니메이션 성능(CSS Animation Performance), [[GPU 가속 및 컴포지팅|GPU 가속 및 컴포지팅]]
- **Projects/Contexts:** [[유지보수 가능한 대규모 프론트엔드 CSS 설계|유지보수 가능한 대규모 프론트엔드 CSS 설계]], [[성능 중심의 웹 애니메이션 및 인터랙션 구현|성능 중심의 웹 애니메이션 및 인터랙션 구현]]
- **Contradictions/Notes:** 소스에 따르면 `will-change` 속성은 브라우저가 애니메이션을 최적화할 수 있도록 힌트를 제공하여 성능 향상에 도움을 줄 수 있지만, 성능 문제를 미리 예상하고 지나치게 남용할 경우 브라우저 자원을 고갈시켜 오히려 성능을 떨어뜨릴 수 있으므로 최후의 수단으로만 신중하게 사용해야 한다고 조언합니다 [17-19].

---
*Last updated: 2026-04-26*