Reflow와 Repaint 🎨

Reflow와 Repaint는 웹 브라우저의 렌더링 엔진이 HTML, CSS 등의 내용을 시각적으로 화면에 표시하는 과정에서 중요한 역할을 하는 두 가지 개념이다.

특히 성능 최적화와 관련해 매우 중요한 요소 중 하나다.

 

Reflow (Layout 또는 Relayout)

Reflow는 문서의 레이아웃을 계산하고 요소의 위치와 크기를 결정하는 과정이다.

DOM이나 CSS 스타일에 변화가 생겼을 때 브라우저는 요소들의 위치와 크기를 다시 계산해야 하는데 이 과정이 바로 Reflow다.

 

트리거되는 경우 (다음과 같은 변화에서 발생)

• DOM 요소 추가/제거
• 요소의 크기나 위치 변경 (예: width, height, top, left, margin, padding, border, font-size 등)
• 창 크기 조정 (resize 이벤트)
• 클래스 변경이 layout 속성에 영향을 줄 때
• 스타일을 변경했을 때 (element.style.height = "200px" 같은 직접 조작)
• 사용자 입력 (ex: 입력창에 글자 입력 시)

Reflow는 성능 비용이 높은 작업이다. 하나의 요소만 변경되었더라도 그 영향 범위가 클 경우 부모, 자식, 형제 노드들도 모두 다시 레이아웃 계산을 해야 할 수 있다.

 

 

Repaint

Repaint는 요소의 시각적인 부분(색상, 테두리, 그림자 등) 이 변경되어 브라우저가 해당 부분을 다시 그리는 과정인데 요소의 위치나 레이아웃은 그대로지만, 외관적인 스타일이 바뀌는 경우 발생한다.

Reflow가 실행된 순간 뒤에 실행된다.

 

728x90

 

트리거되는 경우 (다음과 같은 스타일 속성 변경에서 발생)

• color, background-color
• visibility
• box-shadow
• outline, border-color
• text-decoration, font-style, opacity 등

Repaint는 Reflow보다는 상대적으로 비용이 낮다. 하지만 많은 요소에 적용될 경우 여전히 성능 저하가 있을 수 있다.

 

 

Reflow vs Repaint 요약 비교

항목	Reflow	Repaint
발생 조건	레이아웃 변경 시	시각적 스타일 변경 시
영향 범위	DOM 트리 내 여러 요소	해당 요소에만 국한되는 경우 많음
비용	높음	상대적으로 낮음
예시	요소 크기, 위치 변경 등	색상, 배경색, 그림자 변경 등

 

 

성능 최적화 팁

1. 클래스 토글: element.style을 직접 조작하는 것보다 미리 정의된 클래스를 추가/삭제하는 방식이 효율적이다.
2. DOM 변경 최소화: DOM 구조 변경은 Reflow를 유발하므로 최소한으로 조작한다.
3. Batching DOM Access: 여러 스타일을 읽고 쓰는 작업은 그룹화해서 처리한다.
4. requestAnimationFrame 활용: 애니메이션과 관련된 DOM 변경은 이 메서드를 이용해 브라우저의 렌더링 타이밍에 맞춰 처리한다.
5. will-change 사용: 애니메이션이나 트랜지션이 예정된 요소에 미리 GPU 처리를 유도해 렌더링 병목을 방지할 수 있다.

 

참고 사항

• 일부 스타일 변경은 Reflow와 Repaint를 모두 유발한다. 예를 들어 width를 바꾸면 레이아웃이 바뀌고, 그에 따라 다시 그림을 그려야 하므로 둘 다 발생하기 때문이다.
• transform, opacity는 GPU 가속이 가능한 속성이며, 레이아웃에 영향을 주지 않아 Reflow 없이 애니메이션 처리가 가능하다. 때문에 이 속성들을 사용하면 더욱 부드러운 UI를 구현할 수 있다.

 

이상 스텔라였습니다. ✍️

 

개발하는 스텔라

 

 

도움이 되셨다면 공감과 구독 부탁드려요. ❣️