2nd/10_Wiki/Topics/Frontend_Mastery/Reflow and Repaint.md

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