리플로우와 리페인트의 차이는?
리플로우는 위치·크기 재계산, 리페인트는 색 등 시각 속성만 다시 칠하는 것입니다.
레이아웃에 영향을 주는 변경(크기·위치)은 리플로우(레이아웃 재계산)를 일으키고, 색·배경처럼 위치가 그대로인 변경은 리페인트만 합니다. 리플로우가 더 비싸므로, transform·opacity처럼 합성만 일으키는 속성으로 애니메이션하면 성능에 유리합니다.
핵심 포인트
- 리플로우: 레이아웃 재계산(비쌈)
- 리페인트: 시각 속성만
- transform/opacity는 합성 단계