Reflow와 Repaint가 실행되는 시점

Reflow와 Repaint가 실행되는 시점

Reflow: 레이아웃이 변경될 때 발생하며, 브라우저가 요소들의 크기와 위치를 다시 계산하는 과정입니다.
  - DOM 엘리먼트 추가, 제거, 또는 변경.
  - CSS 스타일 변경이나 클래스 추가로 레이아웃이 변경될 때.
  - 엘리먼트의 크기를 변경하면 다른 요소에도 영향을 미칠 수 있습니다.
  - CSS 애니메이션과 트랜지션은 각 프레임에서 Reflow를 발생시킵니다.
  - `offsetWidth`, `offsetHeight` 속성 사용 시, Reflow가 트리거되어 값을 계산합니다.
  - 유저 인터랙션(hover 효과, 텍스트 입력, 창 크기 조정 등)이 Reflow를 유발할 수 있습니다.

Repaint: 요소의 가시성이나 스타일이 변경될 때 발생하며, 레이아웃에는 영향을 주지 않습니다.
  - `opacity`, `background-color`, `visibility` 등의 스타일이 변경될 때.
  - Reflow가 발생한 이후에 Repaint가 실행됩니다.

Reflow는 Repaint보다 성능에 더 큰 영향을 미칠 수 있으므로 성능최적화가 필요합니다.