[Frontend] Reflow, Repaint

1. 개요

VritualDOM의 동작에 관해 다룬 적이 있었다.
https://w-storage.tistory.com/m/71

[React] VitrualDOM을 알아보자!

여기서 DOM 트리를 수정할 때 Reflow, Repaint과정에서 리소스를 많이 소모한다 했는데, Reflow와 Repaint가 무엇인지 한번 알아보자!

 

2. Reflow

Reflow는 레이아웃을 변경하는 작업이며 레이아웃 단계에서 발생한다.
width, height같은 크기나 top, bottom같은 위치의 변경이 일어날 때 브라우저가 이와 관련된 컴포넌트들의 크기, 위치를 계산한다.
Reflow발생시 하위 컴포넌트들은 모두 Reflow가 발생한다.
이는 큰 부하로 작용할 수 있기 때문에 Reflow를 최소화하는 작업이 필요하다.

3. Repaint

Repaint는 시각적 요소를 변경하는 작업이며 페인트 단계에서 발생한다.
color, border같은 레이아웃의 변화는 없지만, 시각적 변화가 일어날 때 화면을 다시 그린다.

4. 최적화 방법

Reflow, Repaint 모두 부하를 주는 작업이지만 Reflow가 주는 부하가 상대적으로 더 크다.
Reflow의 최적화를 위해선 여러 변경사항을 묶어 batch update해주는 방법으로 Reflow빈도를 줄일 수 있다.
또한 offset같은 요소는 접근할 때 마다 Reflow가 발생할 수 있으므로 변수로 저장해 사용하면 Reflow빈도를 줄일 수 있다.