🙋 reflow와 repaint?
reflow와 repaint는 웹 페이지가 렌더링 되는 과정에서 발생하는 중요한 작업들이라고 한다. 하나하나 살펴보자‼️
🔁 reflow
브라우저가 페이지의 레이아웃을 다시 계산하는 과정이다.
DOM의 구조가 변경되거나 CSS 스타일이 변경되면 브라우저는 각 요소가 화면에 어떻게 배치될지 다시 계산해야 한다.
중요한 점! 이때는 해당 요소뿐만 아니라 연관된 모든 요소(모든 자식 요소, 관련된 부모 요소)의 배치를 다시 계산해야 한다.
➡️ 비용이 많이 드는 작업
🎨 repaint
요소의 모양이나 스타일이 변경될 때 발생한다
요소의 레이아웃은 그대로, 스타일(색상, 배경 등)만 변경되는 경우 요소를 다시 그리는 것
➡️ reflow보다는 비용이 적게 든다.
reflow : 레이아웃 다시 계산 ➡️ repaint : 계산결과를 화면에 다시 그리는 과정
🧾 최적화
reflow와 repain를 잘 관리하는 것이 성능 최적화에 도움이 된다.
How⁉️
1. reflow를 유발하는 CSS 속성 사용 최소화
미리 CSS에서 스타일을 설정해서 초기 로드 시에만 계산이 이루어지도록 하기
2. CSS 애니메이션 최적화
transform과 opacity 속성만을 사용하는 것이 성능적으로 유리하다.
이 두 속성은 GPU 가속을 사용할 수 있어 reflow를 일으키지 않고 repaint만 발생시킨다. 따라서 CPU 자원을 적게 사용한다.
3. will-change 속성 사용
will-change 속성을 사용하면 브라우저에 특정 요소가 변경될 것이라고 미리 언질을 줄 수 있다.
but 너무 자주 사용하면 메모리 낭비 발생!
