Reflow와 Repaint가 실행되는 시점

Reflow

: 생성된 DOM노드의 레이아웃 수치(너비, 높이, 위치 등) 변경 시, 영향 받은 모든 노드(자신, 자식, 부모, 조상)의 수치를 다시 계산하여 렌더 트리를 재생성하는 과정

• DOM element 추가, 제거, 변경
• CSS style 추가, 제거, 변경
• CSS style 직접 변경, 클래스 추가함으로써 레이아웃 변경될 수 있다.
• element 길이 변경하면 DOM트리에 있는 다른 노드에 영향을 줄 수 있다.
• CSS3 animation, transition 
• offsetWidth, offsetHeight사용. (이 속성을 읽으면, 초기 리플로우가 트리거되어 수치가 계산된다.)
• 유저 행동, 인터렉션으로 발생하는 hover효과
• field에 텍스트 입력, 창 크기 조정, 글꼴 크기 변경, stylesheet나 글꼴 전환 등 활성화하여 reflow를 트리거할 수 있다.

 

Repaint

: Reflow 과정이 끝난 후, 재생성된 렌더 트리를 다시 그리는 과정

• 가시성이 변경되는 순간 (opacity, background-color, visibility, outline)
• Reflow가 실행된 순간 뒤에 실행된다.