Reflow 와 Repaint 의 차이

웹 페이지가 렌더링될 때, 브라우저는 수많은 계산을 거쳐 화면에 요소들을 그려낸다.
이 과정에서 자주 등장하는 용어가 바로 Reflow와 Repaint이다.

이 두 작업은 웹 성능 최적화에서 매우 중요한 개념이기 때문에 꼭 이해하고 넘어가야 한다!

---

🔁 Reflow란?

Reflow(리플로우): 브라우저가 DOM 요소들의 위치, 크기 등 레이아웃을 다시 계산하는 과정

• DOM 구조 변경
• CSS 레이아웃 속성 변경 (width, height, margin, padding, border 등)
• 폰트 크기, 위치 변경 등

이런 일이 발생하면 브라우저는 해당 요소뿐 아니라 그 자식 요소들과 부모 요소들까지 다시 계산해야 하기 때문에 비용이 크다.

예시

.my-box {
width: 300px /* <- 변경 시 reflow 발생 */

const box = document.querySelector(".my-box");
box.style.width = "500px"; // reflow 발생

---

🎨 Repaint란?

Repaint(리페인트): 요소의 레이아웃은 그대로 두고, 색상, 배경 등 스타일만 다시 그리는 작업

• background-color, color, box-shadow 등 시각적 요소 변경 시 발생
• 레이아웃 변경은 없지만, 여전히 성능에 영향을 줄 수 있음.

예시

.my-box {
	background-color: blue;
}

const box = document.querySelector('.my_box');
box.style.backgroundColor = "red"; // repaint 발생

Reflow vs Repaint 요약

구분	설명	예시	비용
Reflow	요소의 레이아웃 다시 계산	width, height, margin 변경	높음
Repaint	요소의 스타일만 다시 그림	background-color, color 변경	중간

---

성능 최적화 방법 3가지

width, height, margin, padding, border 등은 Reflow 를 발생시킨다.

1. Reflow를 유발하는 CSS 속성 최소화

팁

• 자주 바뀌는 요소에는 레이아웃 변경이 필요한 속성 사용을 피하자.
• 요소의 크기나 위치는 초기에만 설정하고 동적으로 자주 바꾸지 않기!

/* 안좋은 예시 */
.box:hover {
	width: 200px;
}

/* 추천 예시 */
.box {
	transform: scale(1.05);
}

---

2. GPU 기반 속성 사용 (transform / opacity)

transform, opacity 는 GPU 가속이 가능하고, reflow 없이 repaint 만 발생

.box{
	transition: transform 0.3s ease-in-out;
}

box.style.transform = "translateX(100px)" // GPU 가속 -> 부드럽고 빠르다.

가능하면 애니메이션은 transform 과 opacity 로 구성하자!!

---

3. will-change 속성 활용하기

브라우저에게 "이 요소는 바뀔 예정이야!" 라고 미리 힌트를 주는 속성

.box {
	will-change: transform;
}

• 브라우저는 해당 요소를 미리 GPU 레이어로 올려둔다.
• 이후 변화가 생기면 reflow/repaint 없이 처리 가능

⚠️ 주의: 너무 많은 요소에 will-change를 사용하면 메모리 낭비 발생
꼭 필요한 요소에만 사용하자!

---

결론 정리

• Reflow: 레이아웃을 다시 계산 (더 무거움)
• Repaint: 화면에 다시 그림 (덜 무 거움)
• 성능 최적화 = 둘 다 최대한 덜 일어나도록 관리하는 것

🧠 이 개념만 잘 익혀도 웹 퍼포먼스 최적화에 한 걸음 다가갈 수 있다!