# [[Reflow와 Repaint]]

## 📌 Brief Summary
Reflow(리플로우)와 Repaint(리페인트)는 웹 브라우저가 화면에 콘텐츠를 렌더링할 때 거치는 핵심 과정이다. Reflow는 DOM 요소의 기하학적 속성(크기, 위치 등)이나 구조가 변경될 때 브라우저가 전체 혹은 일부의 레이아웃을 다시 계산하는 작업이다. 반면, Repaint는 요소의 레이아웃에는 영향을 주지 않고 색상이나 그림자 같은 시각적 스타일만 변경될 때 픽셀을 화면에 다시 그리는 과정을 의미한다. 두 과정 모두 브라우저의 성능과 사용자 경험에 큰 영향을 미치므로 최소화하는 최적화 전략이 필수적이다.

## 📖 Core Content
*   **브라우저 렌더링 파이프라인 내의 역할**
    브라우저가 HTML과 CSS를 파싱하여 DOM과 CSSOM을 만들고 이를 결합해 렌더 트리(Render Tree)를 생성한 후, 화면에 요소를 그리기 위해 거치는 핵심 단계가 레이아웃(Layout)과 페인트(Paint)이다 [1-3]. 

*   **Reflow (레이아웃 재계산)**
    *   **정의:** 브라우저가 뷰포트 크기와 박스 모델을 기반으로 화면에 표시되는 모든 요소의 정확한 위치와 크기를 계산하는 과정으로, 레이아웃(Layout)이라고도 불린다 [3-5]. 
    *   **발생 조건 및 비용:** 브라우저 창 크기 조절, DOM 요소 추가/제거, 폰트 크기 변경, 또는 `width`, `height`, `margin`, `padding` 등 레이아웃에 영향을 주는 속성을 수정할 때 발생한다 [6-8]. 렌더 트리의 루트에서 시작하여 아래로 진행되며, 하나의 기하학적 변화가 트리 전체의 연산 캐스케이드를 유발할 수 있어 연산 비용이 매우 높다 [3, 9].

*   **Repaint (화면 다시 그리기)**
    *   **정의:** 계산된 기하학적 구조와 스타일을 화면의 픽셀로 변환하여 래스터화(Rasterizing)하는 과정이다 [6, 10, 11].
    *   **발생 조건 및 비용:** 기하학적 구조 변경 없이 `background-color`, `box-shadow`, 텍스트 색상, 투명도 등 시각적 스타일만 변경될 때 발생한다 [6-8]. 기하학적 구조를 다시 계산하지 않으므로 Reflow보다는 연산 비용이 적게 들지만, 애니메이션 도중 과도하게 발생하면 프레임 저하(frame drop)를 유발할 수 있다 [9, 10].

*   **성능 영향 및 최적화 전략**
    *   **성능 저하 문제:** 빈번한 Reflow와 Repaint는 렌더링 파이프라인을 방해하여 스크롤이나 애니메이션 시 끊김 현상(Jank)을 발생시키고, 모바일 기기에서 CPU와 GPU 사용량을 높여 배터리 수명을 단축시킨다 [12, 13].
    *   **최적화 방법:** 
        *   **Reflow 최소화:** 레이아웃 스래싱(layout thrashing)을 피하고 DOM 업데이트를 일괄 처리(batching)해야 한다 [6, 13]. `width`나 `height` 대신 최신 레이아웃 기법인 Flexbox나 Grid를 사용하면 더 효율적이다 [13]. 또한 애니메이션 요소에는 `top`, `left` 대신 `transform` 속성을 사용하면 Reflow를 유발하지 않고 GPU 가속을 활용할 수 있다 [9, 10, 13].
        *   **Repaint 최소화:** 그림자나 그라데이션 같이 리페인트를 유발하는 속성 사용을 줄이고, 요소를 숨길 때 요소가 공간을 차지하게 두려면 `display: none`(Reflow 유발) 대신 `visibility: hidden`을 사용하여 Reflow 없이 Repaint만 발생하도록 최적화할 수 있다 [14].

## 🔗 Knowledge Connections
- **Related Topics:** [[Critical Rendering Path]], [[Render Tree]], [[DOM]], [[CSSOM]], [[GPU 가속(GPU Acceleration)]]
- **Projects/Contexts:** [[프론트엔드 성능 최적화(Frontend Performance Optimization)]], [[웹 렌더링 최적화(Web Rendering Optimization)]]
- **Contradictions/Notes:** 소스에 따르면 Reflow는 Repaint에 비해 훨씬 무거운 작업이므로(computationally heavier) 최적화의 1순위 대상이 됩니다 [15]. Reflow가 발생하면 변경된 레이아웃을 다시 그려야 하므로 필연적으로 Repaint가 뒤따르지만, 반대로 Repaint는 Reflow 없이 단독으로 발생할 수 있습니다 [7, 8].

---
*Last updated: 2026-04-25*