# [[리플로우(Reflow)|리플로우(Reflow]]

## 📌 Brief Summary
리플로우(Reflow)는 웹 페이지의 레이아웃이나 구조가 변경될 때, 브라우저가 전체 페이지 또는 일부 영역의 기하학적 구조(크기, 위치 등)와 레이아웃을 다시 계산하는 과정입니다 [1, 2]. 이는 브라우저의 렌더링 파이프라인 중 가장 리소스를 많이 소모하는 작업으로, 과도하게 발생할 경우 애니메이션이 끊기거나 스크립트 실행이 느려지는 등 프론트엔드 성능을 크게 저하시키는 주요 원인이 됩니다 [3, 4]. 따라서 유지보수 가능하고 확장성 있는 CSS 아키텍처 설계 시 리플로우를 최소화하는 것은 필수적인 최적화 과제입니다 [4, 5].

## 📖 Core Content
* **발생 원인과 메커니즘**
  * 브라우저의 렌더링 파이프라인(Style 계산 -> Layout(리플로우) -> Paint(리페인트) -> Composite)에서 Layout 단계에 해당하며, 전체 요소 트리의 기하학적 구조를 다시 계산하도록 강제합니다 [4].
  * 리플로우는 `width`, `height`, `margin`, `padding`, `top`, `left` 등 레이아웃에 영향을 미치는 속성을 변경할 때 발생합니다 [6, 7].
  * 창 크기 조절, 폰트 변경, DOM 스크립트 조작, 클래스 속성 조작, `:hover`와 같은 가상 클래스 활성화, 그리고 `offsetWidth`나 `offsetHeight`를 계산하기 위해 값을 읽어 들일 때도 트리거됩니다 [8, 9].
  * 특정 요소에 리플로우가 발생하면 해당 요소의 자식, 조상 노드뿐만 아니라 DOM 트리에서 그 뒤에 오는 모든 요소의 리플로우를 연쇄적으로 유발합니다 [2].

* **성능에 미치는 영향**
  * 리플로우는 전체 페이지의 레이아웃을 다시 잡는 것과 맞먹을 정도로 성능 비용이 높습니다 [3].
  * 특히 스크립트가 DOM의 값을 읽고 쓰는 작업을 반복하는 **레이아웃 스래싱([[Layout Thrashing|Layout Thrashing]])**이 발생하면, 브라우저가 내부 레이아웃 큐를 강제로 비우고 동기적으로 리플로우를 수행해야 하므로 프레임 속도(FPS)가 급격히 떨어집니다 [9, 10].

* **최적화 및 감소 기법**
  * **애니메이션 최적화:** 애니메이션에는 레이아웃 속성 대신 `transform`과 `opacity`를 사용해야 합니다. 이 속성들은 리플로우와 리페인트 단계를 건너뛰고 GPU 가속을 통해 Composite 단계만 거치므로 성능에 유리합니다 [7, 11].
  * **DOM 계층 최소화:** CSS 클래스를 변경할 때는 영향을 받는 노드의 수를 줄이기 위해 DOM 트리의 최대한 하위 노드에서 변경해야 합니다 [12].
  * **DOM 조작 일괄 처리:** `documentFragment`를 사용하거나 `requestAnimationFrame`을 통해 DOM 조작과 애니메이션을 일괄 처리하여 렌더링 주기를 동기화해야 합니다 [9, 13]. 읽기와 쓰기 작업을 분리하여 레이아웃 스래싱을 방지하는 것도 필수적입니다 [10].
  * **테이블 레이아웃 지양:** 테이블은 레이아웃을 확정하기 위해 여러 번의 렌더링 패스가 필요하며 작은 변경에도 모든 노드의 리플로우를 유발하므로 레이아웃용으로 사용해서는 안 됩니다 [14].
  * **위치 속성 활용:** 애니메이션이 적용되는 요소에는 `position: fixed` 또는 `absolute`를 적용하여 주변 요소의 레이아웃에 영향을 주지 않고 리페인트만 유발하도록 격리합니다 [15].
  * **사전 힌트 제공:** 변경이 빈번한 요소에는 `will-change` 속성을 사용하여 브라우저가 렌더링 최적화를 미리 준비할 수 있도록 힌트를 제공합니다 [10, 16].

## 🔗 Knowledge Connections
- **Related Topics:** [[리페인트(Repaint)|리페인트(Repaint]], 레이아웃 스래싱(Layout Thrashing), CSS 애니메이션 성능 최적화, DOM 조작(DOM Manipulation), [[렌더링 파이프라인(Rendering Pipeline)|렌더링 파이프라인(Rendering Pipeline]]
- **Projects/Contexts:** CSS 실전 설계, [[성능 최적화(Performance Optimization)|성능 최적화(Performance Optimization]], 유지보수 가능한 프론트엔드 아키텍처
- **Contradictions/Notes:** 리플로우는 성능 저하의 주범이므로 피하는 것이 일반적인 원칙이지만, 때로는 브라우저의 디스플레이 오류(예: 탭 전환 시 높이가 맞지 않거나 리스트 정렬이 깨지는 현상)를 바로잡기 위해 의도적으로 더미 클래스를 추가하거나 디스플레이를 토글하여 강제로 리플로우를 유발하는 기법이 사용되기도 합니다 [17, 18].

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