⚙️Reflow
- 생성된 DOM 노드의 레이아웃 수치가 변경 시 영향받는 모든 노드의 수치를 다시 계산하여 렌더트리를 재 생성 하는 과정
⚙️Repaint
- Reflow 과정이 끝난 후 재 생성된 렌더트리를 다시 그리는 과정
실행되는 시점
Reflow
- DOM 엘리먼트가 추가,제거,변경 될때
- CSS 스타일이 추가,제거,변경 될때
- CSS 스타일을 직접 변경하거나, 클래스를 추가함으로써 레이아웃이 변경될 수 있다. 엘리먼트의 길이를 변경하면, DOM 트리에 있는 다른 노드에 영향을 줄 수 있다.
- CSS3 애니메이션과 트랜지션. 애니메이션의 모든 프레임에서 리플로우가 발생한다.
- offsetWidth 와 offsetHeight의 사용. offsetWidth와 offsetHeight 속성을 읽으면,
초기 리플로우가 트리거되어 수치가 계산된다. - 유저 interaction으로 발생하는 hover 효과, 필드에 텍스트 입력, 창 크기 조정, 글꼴 크기 변경, 스타일시트 또는 글꼴 전환등을 활성화하여 리플로우를 트리거할 수 있다.
Repaint
- 가시성이 변경되는 순간 (opacity, background-color, visbility, outline)
- Reflow가 실행된 순간 뒤에 실행된다.
