reflow와 repaint의 차이점

Reflow란?

Reflow는 브라우저가 페이지의 레이아웃을 다시 계산하는 과정이다.
DOM 구조나 CSS 스타일이 변경되어 요소의 크기나 위치가 달라지면 브라우저는 이를 다시 계산해야한다.

이때 한 요소의 변경이 다른 요소에도 영향을 미칠 수 있기 때문에, 비용이 큰 작업이다.
예를 들어 아래와 같은 속성을 변경하면 Reflow가 발생합니다.

• width, height, margin, padding, border
• DOM 구조 변경 (appendChild, removeChild, offsetWidth 접근 등)
• 윈도우 리사이즈나 폰트 변경

💡 즉, Reflow = 레이아웃을 다시 계산하는 과정

---

Repaint란?

Repaint는 요소의 모양이나 스타일이 변경될 때 발생한다.
하지만 레이아웃 자체는 변하지 않고, 시각적인 부분만 다시 그려지는 경우이다.

예를 들어 다음과 같은 스타일 변경 시 repaint가 발생합니다.

• background-color
• color
• visibility

Repaint는 Reflow보다는 비용이 적지만, 여전히 렌더링 성능에 영향을 줄 수 있습니다.

💡 즉, Repaint = 화면을 다시 그리는 과정

---

Reflow & Repaint 차이 요약

구분	Reflow	Repaint
의미	레이아웃 계산 다시 수행	시각적 부분 다시 그림
발생 원인	크기, 위치 변경 등 레이아웃 변화	색상, 배경 등 스타일 변화
영향 범위	부모·자식 등 전체 레이아웃 영향 가능	해당 요소만 영향
비용	높음 (CPU 중심)	낮음 (GPU 가속 가능)

---

성능 최적화 방법 3가지

1️⃣ Reflow를 유발하는 속성 최소화

width, height, margin, padding, border 등은 Reflow를 유발한다.
가능한 한 초기 로드 시에만 계산하도록 CSS에서 미리 설정하고, JS로 동적 변경은 최소화한다.

/* ❌ 매번 width 변경하는 것은 Reflow 유발 */
element.style.width = '200px';

/* ✅ 가능하면 미리 CSS에서 정의 */
.element {
  width: 200px;
}

---

2️⃣ GPU 가속 가능한 속성 사용

애니메이션에는 transform 과 opacity 속성을 사용하는 것이 좋다.
이 두 속성은 GPU 가속을 사용하므로 Reflow를 일으키지 않고 Repaint만 발생시킨다.

/* GPU 가속 활용 */
.element {
  transform: translateX(100px);
  opacity: 0.8;
}

---

3️⃣ will-change 속성 활용

will-change 속성은 브라우저에 “이 요소가 곧 변경될 것” 이라고 미리 알려주는 속성이다.
예를 들어 아래처럼 사용하면, 브라우저가 미리 GPU에서 준비해 Repaint/Reflow 부담을 줄인다.

.box {
  will-change: transform;
}

단, 너무 많은 요소에 적용하면 메모리 낭비가 발생하므로 주의가 필요

---

정리

• Reflow: 레이아웃 재계산 (비용이 큼)
• Repaint: 화면 재렌더링 (비용이 적음)

• 최적화 포인트:

  • Reflow 유발 속성 최소화
  • GPU 가속 활용 (transform, opacity)
  • will-change 속성은 필요한 곳에만 사용

---

END