[Reflow와 Repaint] 브라우저 렌더링 성능을 좌우하는 두 가지 개념

Reflow와 Repaint

웹 개발에서 브라우저의 성능은 사용자 경험에 큰 영향을 미칩니다. 특히 CSS를 변경하거나 DOM 구조를 조작할 때, 브라우저 내부에서는 다양한 렌더링 작업이 일어나며, 이 중 Reflow와 Repaint는 성능 측면에서 반드시 이해하고 있어야 할 핵심 개념입니다.
특히 Reflow는 DOM 구조와 레이아웃 재계산이 필요한 CPU 중심 작업이며, Repaint는 상황에 따라 GPU를 활용해 시각적 요소만 빠르게 다시 그릴 수 있는 작업입니다. 이러한 차이로 인해 두 작업은 성능 비용과 렌더링 최적화 방식에 있어 큰 차이를 보입니다.
 

---

1.  Reflow란?

Reflow(또는 Layout)는 요소의 크기, 위치, DOM 구조 변화 등으로 인해 레이아웃 전체 또는 일부를 다시 계산해야 할 때 발생합니다. 이는 브라우저가 요소들의 위치와 크기를 다시 계산하고, 필요시 Repaint까지 동반합니다.
다음과 같은 변화는 Reflow를 유발합니다.

element.style.width = "500px"; // 요소 크기 변경
element.classList.add("new-class"); // 새 클래스 적용으로 레이아웃 변화 발생 가능

주요 특징

• 비용이 큰 작업 (특히 전체 레이아웃에 영향 줄 경우)
• 자식 요소, 형제 요소에도 연쇄적으로 영향
• 예 : width, height, margin, padding, DOM 구조 변경, font-size 변경 등

 

---

2.  Repaint란?

Repaint는 요소의 스타일 속성 중 레이아웃(위치, 크기)에는 영향을 주지 않는 변경이 발생했을 때 브라우저가 다시 화면에 해당 요소를 그리는 과정입니다.
다음과 같은 스타일 변경은 Repaint를 유발합니다.

element.style.width = "500px"; // 요소 크기 변경
element.classList.add("new-class"); // 새 클래스 적용으로 레이아웃 변화 발생 가능

주요 특징

• 레이아웃 재계산 없이 화면만 다시 그림
• 상대적으로 가벼운 작업
• 예 : color, background-color, visibility, border-color 변경 등

 

---

3.  Repaint 와 Reflow 비교

항목	Reflow (Layout)	Repaint
정의	요소의 위치, 크기 재계산 필요	요소의 시각적 스타일만 다시 그림
발생 조건	크기, 위치, DOM 구조 변경 시	색상, 투명도 등 변경 시
성능 영향	높음 (비용 큼)	낮음
연쇄적 영향	있음 (부모/자식 요소에도 영향)	없음
예시 속성	width, height, margin, display	color, background-color

 

---

3.  브라우저 성능 최적화를 위한 팁

1. DOM 조작 최소화
   • 한 번에 여러 DOM 변경이 필요할 경우, DocumentFragment를 활용하거나, 변경을 메모리에서 미리 수행한 후 한 번에 반영합시다.
2. CSS 속성 변경은 배치를 고려해서
   • transform, opacity는 Reflow 없이 애니메이션을 구현할 수 있는 속성입니다.
3. 애니메이션은 GPU 친화적으로
   • 가능한 경우 CSS 애니메이션은 transform과 opacity를 활용합시다.
4. requestAnimationFrame 활용
   • 자바스크립트를 통한 UI 업데이트는 requestAnimationFrame을 통해 프레임에 맞춰 실행되도록 최적화합시다.

 

---

4.  마무리

언제 어떤 작업이 일어나는지를 인지하자.

Repaint와 Reflow는 브라우저가 사용자에게 보여주는 화면을 만들기 위해 필수적인 과정이지만, 성능 최적화 관점에서는 발생을 최소화하는 것이 중요합니다. 개발자로서 이 차이를 인지하고, 성능에 민감한 UI 구현 시 이를 고려하는 것이 쾌적한 사용자 경험을 제공하는 핵심입니다.

함께 보면 좋은 자료

외부 사이트 :

• MDN Web Docs - Reflow
• MDN Web Docs - Repaint
• CSStriggers - 어떤 속성이 Repaint / Reflow를 유발하는지 정리된 사이트

블로그 글 : 

[브라우저 렌더링 과정] HTML이 화면에 보이기까지

 

---