# [[Reflow and Repaint]]

## 📌 Brief Summary
리플로우(Reflow)와 리페인트(Repaint)는 브라우저가 웹 페이지를 화면에 렌더링하기 위해 수행하는 핵심 과정입니다 [1-3]. 리플로우(또는 레이아웃)는 DOM의 구조나 스타일 변경 시 전체 또는 일부 요소의 정확한 위치와 크기를 재계산하는 비용이 높은 작업입니다 [2, 4]. 반면 리페인트는 레이아웃 변경 없이 요소의 시각적 형태(색상, 배경 등)만 업데이트할 때 화면의 픽셀을 다시 그리는 과정으로, 두 과정 모두 과도하게 발생할 경우 웹 성능 저하의 주요 원인이 됩니다 [5, 6].

## 📖 Core Content
* **브라우저 렌더링 파이프라인 내의 역할**
  * 브라우저는 HTML과 CSS를 파싱해 각각 DOM과 CSSOM을 만들고, 이를 결합하여 시각적 요소들만 포함하는 렌더 트리(Render Tree)를 생성합니다 [3, 7].
  * 렌더 트리가 구성되면, 각 요소의 정확한 화면상 위치와 크기를 계산하는 레이아웃(Layout, 즉 Reflow) 단계를 거칩니다 [1, 7].
  * 레이아웃이 확정되면, 기하학적 정보를 바탕으로 실제 화면의 픽셀에 시각적 스타일을 칠하는 페인트(Paint, 즉 Repaint) 단계와 층을 병합하는 합성(Compositing) 단계를 진행합니다 [7-9].

* **리플로우(Reflow)의 특성 및 유발 조건**
  * 브라우저 창 크기 조절, DOM 요소의 추가 및 제거, 또는 `width`, `height`, `margin`, `padding`과 같은 레이아웃 속성 변경 시 발생합니다 [2, 6].
  * 문서의 연속적인 흐름(Continuous document flow) 특성 때문에, 한 요소의 기하학적 변화는 부모, 자식, 후속 요소들까지 연쇄적인 재계산을 유발할 수 있습니다 [4, 5, 8].
  * 리플로우는 사용자 상호작용을 차단할 수 있는(User-blocking) 연산 집약적인 작업으로 렌더링 성능에 큰 영향을 미칩니다 [4, 10].

* **리페인트(Repaint)의 특성 및 유발 조건**
  * 요소의 기하학적 구조나 위치는 변경하지 않고 배경색, 글자색, 그림자 등의 시각적 속성만 변경할 때 픽셀을 다시 그리는 과정입니다 [2, 6, 11].
  * 리플로우보다 연산 비용은 낮지만, 여전히 과도하게 발생할 경우 프레임 드롭(Frame drop)이나 화면 끊김(Jank)을 초래하고 모바일 기기의 배터리 소모를 가속화할 수 있습니다 [5, 9, 12, 13].

* **최적화 전략 (Performance Optimization)**
  * **문서 흐름 분리:** 복잡한 애니메이션을 렌더링할 때는 해당 요소를 `position: absolute`나 `position: fixed`를 사용해 일반적인 문서 흐름(Flow)에서 분리함으로써 전체 레이아웃의 리플로우 연산을 방지해야 합니다 [14].
  * **GPU 가속 및 속성 최적화:** 위치 이동 애니메이션에 `top`이나 `left` 대신 `transform: translate()`을 사용하면, 브라우저가 새로운 리플로우나 리페인트 사이클 없이 자체 레이어 내에서 요소를 이동시키고 GPU 합성(Compositing)을 거쳐 부드러운 60fps 애니메이션을 유지할 수 있습니다 [9, 12, 13].
  * **DOM 조작 최소화 및 배치 처리:** 루프 내에서의 잦은 DOM 조작을 피하고 업데이트를 일괄 처리하여, 읽기와 쓰기가 번갈아 일어나는 레이아웃 스래싱(Layout thrashing) 현상을 방지해야 합니다 [11, 12, 15].
  * **구조 및 선택자 단순화:** DOM 트리의 깊이를 줄이고, 매칭 과정에서 더 많은 연산이 필요한 복잡한 하위(Descendant) CSS 선택자의 사용을 피해야 합니다 [12, 14].

## 🔗 	Knowledge Connections
- **Related Topics:** [[Critical Rendering Path]], [[Render Tree]], [[DOM]], [[CSSOM]], [[Layout Thrashing]], [[GPU Acceleration]]
- **Projects/Contexts:** [[Frontend Performance Optimization]], [[Browser Rendering Engine]]
- **Contradictions/Notes:** 소스에 따르면 시각적 속성에 따른 요소 숨김 처리 방식에서 큰 차이가 발생합니다. `display: none`은 렌더 트리에서 요소를 완전히 제거해 리플로우(Reflow)를 유발하지만, `visibility: hidden`은 요소를 빈 상자로 렌더링하여 레이아웃에 공간을 유지하므로 리플로우 없이 리페인트(Repaint)만 발생시킵니다 [16, 17].

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