reflow, repaint 차이점

reflow와 repaint는 웹 페이지가 렌더링 되는 과정에서 발생하는 중요한 작업

reflow
브라우저가 페이지의 레이아웃을 다시 계산하는 과정

DOM 구조가 변경되거나 CSS 스타일이 변경되면, 브라우저는 각 요소가 화면에 어떻게 배치될지 다시 계산함.
이 과정은 모든 자식 요소와 관련된 부모 요소까지 영향을 주어서 비용이 많이 드는 작업
ex-CSS에서 요소의 width나 height 속성을 변경하면, 브라우저는 해당 요소뿐만 아니라 연관된 모든 요소의 배치를 다시 계산

반면

repaint
요소의 모양이나 스타일이 변경될 때 발생

요소의 레이아웃은 그대로, 색상, 배경 등의 스타일만 변경되는 경우.
ex-background-color만 변경되면 브라우저는 요소의 모양만 다시 그리면 되어서 reflow보단 비용이 덜 들지만, 여전히 성능에 영향을 줌

reflow는 레이아웃을 다시 계산하는 과정, repaint는 계산 결과를 화면에 다시 그리는 과정

최적화 방법

1. reflow를 유발하는 CSS 속성 사용 최소화
   width, height, margin, padding, border 등의 속성은 요소의 레이아웃을 다시 계산하게 됨, reflow 일으킴. 가능한 미리 CSS에서 스타일을 설정해 초기 로드 시에만 계산이 이뤄지도록하고 변경안하는게 좋음
2. CSS 애니메이션 최적화
   transform과 opacity 속성만을 사용하는 것이 성능에 유리, 이 두 속성은 GPU 가속을 사용할 수 있어 reflow일으키지 않고 repaint만 발생시키므로 CPU자원 적게 사용
3. will-change속성 사용
   will-change속성을 사용하여 브라우저에 특정 요소가 변경될 것이라고 미리 언질.
   ex-will-change: transform으로 미리 GPU에서 요소를 준비하게 하여 reflow 및 repaint에 미치는 영향을 줄일 수 있음.
   너무 자주 사용하면 메모리 낭비 발생하여 필요한 요소에만 적용하기!