Antigravity Agent
5.4 KiB
5.4 KiB
리플로우 및 리페인트 (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