# [[리플로우 및 리페인트(Reflow & Repaint)]]

## 📌 Brief Summary
리플로우(Reflow)는 요소의 너비, 높이 등 레이아웃이나 기하학적 구조가 변경될 때 브라우저가 문서의 구조를 재계산하는 과정이며, 리페인트(Repaint)는 레이아웃에 영향을 주지 않는 시각적 요소(색상, 배경 등)가 변경될 때 발생하여 화면을 다시 그리는 과정입니다 [1-3]. 두 과정 모두 연산 비용이 높고 렌더링 성능을 저하시켜 화면 끊김(Jank) 현상을 유발할 수 있으므로, CSS 및 애니메이션 구현 시 이들의 발생을 최소화하는 최적화 전략이 필수적입니다 [1, 4, 5].

## 📖 Core Content
**리플로우와 리페인트의 개념 및 비용**
*   **리플로우(Reflow):** 요소의 레이아웃, 크기, 위치 등에 영향을 주는 변경 사항이 있을 때 발생합니다. 한 요소에서 리플로우가 발생하면 해당 요소의 자식, 부모 노드는 물론 DOM 트리에서 그 뒤에 오는 모든 요소까지 재계산되어야 하므로 성능 측면에서 매우 비쌉니다 [3, 5]. 심한 경우 페이지 전체를 다시 레이아웃하는 것과 같습니다 [5].
*   **리페인트(Repaint):** 윤곽선(outline), 가시성(visibility), 배경색 등 레이아웃에는 영향을 주지 않지만 시각적인 스킨이 변경될 때 일어납니다 [3]. 브라우저는 시각적 변화를 반영하기 위해 다른 모든 노드의 가시성을 확인해야 하므로 이 또한 비용이 듭니다 [3]. 브라우저는 렌더 트리 생성 후 레이아웃을 계산하고 그 후에 페인트를 수행합니다 [6].

**발생 원인**
*   창 크기 조절, 폰트 변경, 스타일시트 추가/제거, 사용자의 입력(텍스트 타이핑 등), DOM 조작, `:hover`와 같은 가상 클래스 활성화, `offsetWidth` 및 `offsetHeight` 속성 계산, 인라인 스타일 설정 등이 리플로우를 유발합니다 [7, 8].
*   애니메이션 적용 시 `width`, `height`, `margin`, `padding`, `top`, `left`, `box-shadow` 등의 속성을 변경하면 레이아웃 스래싱(Layout Thrashing)과 리페인트 주기를 촉발하여 성능이 급격히 저하됩니다 [4, 9, 10].

**최적화 및 감소 기법**
*   **DOM 및 스타일 조작 최소화:** 여러 개의 인라인 스타일을 각각 적용하는 것을 피하고, 변경 사항을 외부 클래스로 결합하여 한 번의 클래스 속성 조작으로 리플로우가 한 번만 발생하게 해야 합니다 [8, 11]. DOM 트리의 가능한 가장 낮은 계층(하위)에서 클래스를 변경하여 리플로우의 영향을 받는 노드 수를 줄이는 것이 좋습니다 [12]. DOM 변경 시에는 `documentFragment`를 사용하여 일괄 업데이트해야 합니다 [11, 13].
*   **애니메이션 최적화:** 레이아웃을 건드리는 속성 대신 `transform`, `opacity`, `filter` 속성을 사용하여 애니메이션을 처리하면 리플로우를 방지하고 렌더링 성능을 높일 수 있습니다 [2, 10, 14]. 또한 `position: fixed` 또는 `absolute`인 요소에 애니메이션을 적용하면 전체 문서의 리플로우 대신 부분적인 리페인트만 유발할 수 있습니다 [15].
*   **브라우저 힌팅(Hinting) 및 동기화:** 잦은 변경이 예상되는 요소에 `will-change` 속성을 부여하여 브라우저가 렌더링을 미리 최적화하도록 유도할 수 있습니다 [16-18]. 아울러 애니메이션은 브라우저의 리페인트 주기와 동기화되는 `requestAnimationFrame`을 사용하여 일괄 처리해야 합니다 [13, 18].
*   **레이아웃 스래싱 방지 및 기타 주의사항:** DOM을 읽고 쓰는 작업을 명확히 분리하여(배칭) 브라우저가 강제로 동기식 리플로우를 발생시키는 레이아웃 스래싱을 방지해야 합니다 [13, 18]. 또한 렌더링을 지연시키고 작은 변경에도 모든 노드의 리플로우를 발생시키는 테이블(Table) 레이아웃 사용을 피하고 [19], 너무 복잡하고 깊게 중첩된 CSS 선택자를 사용하지 말아야 합니다 [11].

## 🔗 Knowledge Connections
- **Related Topics:** [[CSS 애니메이션 최적화(CSS Animations Optimization)]], [[레이아웃 스래싱(Layout Thrashing)]], [[렌더링 파이프라인(Rendering Pipeline)]]
- **Projects/Contexts:** [[대규모 프론트엔드 프로젝트(Large Frontend Projects)]], [[반응형 디자인 및 인터랙티브 UI(Responsive and Interactive UI)]]
- **Contradictions/Notes:** 소스에 따르면 `will-change` 속성은 성능 향상에 도움이 되지만, 과도하게 사용할 경우 오히려 브라우저의 시스템 리소스를 많이 소모하여 성능 저하를 유발할 수 있으므로 꼭 필요한 요소(최후의 수단)에만 신중하게 사용해야 한다고 경고합니다 [16, 17].

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