Antigravity Agent
4.7 KiB
4.7 KiB
리플로우(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)**이 발생하면, 브라우저가 내부 레이아웃 큐를 강제로 비우고 동기적으로 리플로우를 수행해야 하므로 프레임 속도(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), 레이아웃 스래싱(Layout Thrashing), CSS 애니메이션 성능 최적화, DOM 조작(DOM Manipulation), 렌더링 파이프라인(Rendering Pipeline)
- Projects/Contexts: CSS 실전 설계, 성능 최적화(Performance Optimization), 유지보수 가능한 프론트엔드 아키텍처
- Contradictions/Notes: 리플로우는 성능 저하의 주범이므로 피하는 것이 일반적인 원칙이지만, 때로는 브라우저의 디스플레이 오류(예: 탭 전환 시 높이가 맞지 않거나 리스트 정렬이 깨지는 현상)를 바로잡기 위해 의도적으로 더미 클래스를 추가하거나 디스플레이를 토글하여 강제로 리플로우를 유발하는 기법이 사용되기도 합니다 [17, 18].
Last updated: 2026-04-26