화면 reflow 가 일어나는 경우

렌더 트리와 각 요소들의 크기와 위치를 다시 계산해주는 과정을 Reflow라고 한다.

Reflow가 일어나는 대표적인 경우는 다음과 같다.

• DOM 노드의 추가, 제거
• DOM 노드의 위치 변경
• DOM 노드의 크기 변경(margin, padding, border, width, height 등..)
• CSS3 애니메이션과 트랜지션
• 폰트 변경, 텍스트 내용 변경
• 이미지 크기 변경
• offset, scrollTop, scrollLeft과 같은 계산된 스타일 정보 요청
• 페이지 초기 렌더링
• 윈도우 리사이징

이외에도 화면의 구조가 변경되었다면 Reflow가 발생한다고 이해하면 된다.