Reflow/Repaint 실행 시점

Reflow

- DOM 엘리먼트 추가, 제거, 변경

- CSS 스타일 추가, 제거, 변경

- CSS 스타일 직접 변경 or 클래스 추가로 인한 레이아웃 변경

    - 엘리먼트의 길이를 변경하여 DOM 트리에 있는 다른 노드에 영향을 줄 경우

- CSS3 애니메이션과 트랜지션

    - 애니메이션의 모든 프레임에서 리플로우 발생

- offsetWidth 와 offsetHeight 의 사용

    - offsetWidth 와 offsetHeight 속성을 읽으면, 초기 리플로우가 트리거 되어 수치를 계산

- 유저 행동 or 유저 인터렉션으로 발생

    - hover 효과

    - 필드에 텍스트 입력

    - 창 크기 조정

    - 글꼴 크기 변경

    - 스타일시트 or 글꼴 전환

 

Repaint

- 가시성이 변경되는 순간

    - opacity, background-color, visibility, outline

- Reflow가 실행된 순간 뒤에 실행