Reflow ( Layout Recalculation )
DOM이나 CSS의 변경으로 인해 요소의 레이아웃이 다시 계산되어야 하는 상황
- DOM의 구조 변경 ( 요소 추가/삭제 )
- 요소의 크기, 위치 여백 등이 변경
- 브라우저 창 크기 조절
Reflow는 계산이 복잡하며, 변경이 발생한 요소와 그 자식, 부모, 형제에 영향을 미칠 수 있어 성능 비용이 높음
Repaint
요소의 스타일이 변경될 때 발생. 레이아웃은 변경되지 않으나, 시각적으로 다시 그릴 때 수행
상대적 비용이 낮지만 화면에 변경된 부분을 다시 그리는 작업이 필요함
둘 모두 성능에 영향을 미칠 수 있으므로 최적화하는 과정이 필요하다
- reflow를 유발하는 CSS 속성 사용 최소화
- CSS 애니메이션 최적화
애니메이션에 transform과 opacity 속성만을 사용하는 것이 성능에 유리함. repaint만 발생시키므로 CPU 자원을 적게 사용함 - will-change 속성 사용
CSS의 will-change 속성을 사용하여 브라우저에 특정 요소가 변경될 것임을 경고함
GPU에서 미리 요소를 준비하게 해 reflow와 repaint에 미치는 영향을 줄일 수 있으나, 남발하면 메모리 낭비가 발생하므로 필요한 요소에만 적용해야함
