Reflow와 Repaint

Reflow와 Repaint는 웹 페이지가 렌더링 되는 과정에서 발생하는 중요한 작업들이며, 웹 성능과 사용자 경험에 큰 영향을 미친다.

Reflow (Layout)

Reflow는 웹 페이지의 레이아웃을 다시 계산하는 과정이며, DOM 구조나 CSS의 스타일이 변경되면 브라우저가 렌더 트리를 생성한 후, 각 요소의 크기와 위치를 계산해야 하는데 그 과정에서 발생한다.

발생 상황

• DOM 요소가 추가, 제거, 혹은 수정될 때
• 요소의 크기나 위치가 변할 때 (예: width, height, margin, padding, border 등)
• 브라우저 창 크기가 변경될 때 (viewport 변경)
• 글꼴이 로드되거나 변경될 때
• CSS 속성이 변경되어 레이아웃에 영향을 줄 때

Reflow의 비용

• Reflow는 계산량이 많으며, 비용이 큰 작업이다.
• 영향을 받은 요소뿐만 아니라 해당 요소와 연관된 부모 및 자식 요소까지 재계산이 필요하다.
• DOM 구조가 복잡할수록 Reflow 비용이 더 커진다.

---

Repaint

Repaint는 요소의 시각적 표현을 다시 그리는 과정이며, 레이아웃 계산은 필요 없지만, 요소의 스타일 변경으로 인해 화면에 다시 렌더링해야 하는 경우 발생한다.

발생 상황

• 색상(color, background-color) 변경
• 텍스트 그림자(text-shadow) 변경
• 요소의 가시성(visibility) 변경

Repaint의 비용

• Repaint는 Reflow보다 상대적으로 비용이 적다.
• 레이아웃을 다시 계산할 필요는 없으나, GPU 또는 CPU가 화면에 요소를 다시 그려야 하므로 성능에 영향을 미칠 수 있다.

---

Reflow와 Repaint 차이점

특징	Reflow	Repaint
발생 이유	레이아웃 변경	시각적 속성 변경 (레이아웃 변화 없음)
비용	높음	낮음
영향 범위	연관된 부모, 자식, 형제 요소	해당 요소만
주요 작업	요소 크기 및 위치 재계산	색상, 그림자 등 시각적 요소 다시 그리기

---

최적화 방법

reflow를 유발하는 CSS 속성 사용을 최소화

• width, height, margin, padding, border 등의 속성은 요소의 레이아웃을 다시 계산하게 하므로 reflow를 일으키기 때문에, 가능한 한 미리 CSS에서 스타일을 설정해 초기 로드 시에만 계산이 이루어지도록 하고, 이후에는 변경하지 않는 것이 좋다.

CSS 애니메이션 최적화

• 애니메이션에는 transform과 opacity 속성만을 사용하는 것이 성능에 유리한데, 두 속성은 GPU 가속을 사용할 수 있어 reflow를 일으키지 않고 repaint만 발생시키므로 CPU 자원을 적게 사용한다.

will-change 속성 사용

• will-change 속성을 사용하여 브라우저에 특정 요소가 변경될 것이라고 미리 언질을 줄 수 있으며, 예시로 will-change: transform으로 미리 GPU에서 요소를 준비하게 하여 성능을 최적화할 수 있다.
• 하지만 will-change 속성은 너무 자주 사용하면 메모리 낭비가 발생하므로 필요한 요소에만 사용해야 한다.