리페인트·리플로우를 이해하면 웹 성능을 최적화할 수 있다

웹 개발에서 "빠른 사이트"는 단순한 코드 효율성 그 이상입니다.

브라우저가 화면을 어떻게 그리는지를 이해하면

더 빠르고 부드러운 사용자 경험을 제공할 수 있습니다.

---

🖼️ 리페인트와 리플로우란?

브라우저는 HTML/CSS를 해석한 후 화면에 그림을 그립니다.

이 과정을 '렌더링 파이프라인'이라고 부르며, 주요 단계는 다음과 같습니다:

HTML 파싱 → DOM 생성 → 스타일 계산 → 레이아웃 계산 → 페인팅 → 컴포지팅

그중 특히 중요한 두 가지가 바로 아래입니다:

• 리플로우(Reflow): 레이아웃을 다시 계산해야 할 때 발생합니다.

  예: 요소 크기 변경, 위치 이동, DOM 추가/삭제 등

• 리페인트(Repaint): 요소의 모양(색상, 그림자 등)만 바뀔 때 발생합니다.

  예: background-color 변경, visibility 변경 등

리플로우는 리페인트보다 훨씬 무거운 작업입니다.

특히 부모 요소가 재계산되면 자식 전체에 영향을 미치기 때문입니다.

---

🐢 성능 병목의 원인

다음과 같은 코드가 리플로우/리페인트를 유발합니다:

element.style.width = '300px'; // 리플로우 + 리페인트
element.style.backgroundColor = 'red'; // 리페인트만
element.offsetTop; // 강제 리플로우 (Layout Thrashing 유발 가능)

**Layout Thrashing(레이아웃 스래싱)**이란?

읽기 → 쓰기 → 읽기 → 쓰기 패턴이 반복되어

브라우저가 레이아웃을 계속 강제로 계산하게 되는 현상입니다.

---

🛠️ 리플로우·리페인트 최소화 팁

1. ✅ 클래스 변경으로 스타일을 일괄 적용하기

   → 스타일을 JS로 직접 바꾸지 않고, 클래스를 토글하세요.

2. ✅ DOM 변경은 배치해서 처리

   → DocumentFragment, requestAnimationFrame 등 사용

3. ✅ 읽기와 쓰기를 분리

   → 읽기 (getBoundingClientRect) → 쓰기 (style) 순서로 나누기

4. ✅ 애니메이션은 transform, opacity로 처리

   → transform: translateX, opacity는 리플로우 없이 GPU 가속 가능

---

🚀 최적화된 애니메이션 예시

.box {
  transition: transform 0.3s ease;
}
.box.move {
  transform: translateX(100px);
}

box.classList.add('move'); // 리플로우 없이 부드럽게 이동

---

✅ 마무리

리플로우와 리페인트는 단순한 용어처럼 보이지만,

프론트엔드 성능 최적화의 핵심 키워드입니다.

화면에서 어떤 변화가 일어날지,

그 변화가 성능에 어떤 영향을 줄지 고민한다면

당신은 이미 성능 최적화의 첫걸음을 뗀 것입니다.