📖 Reflow
💬 정의
- html 요소의 크기나 위치가 변하면 그에 영향을 받는 노드들의 크기와 위치를
다시 계산하게 된다 - 이렇게 요소의 변화에 따라 Layout 과정을 다시 수행 하는 것을 reflow라고 함
💬 발생 사례
- 페이지 초기 렌더링 (최초 Layout 과정)
- 윈도우 리사이징 (Viewport 크기 변경)
- DOM 노드 추가, 제거
- DOM 노드 위치, 크기 변경
- 폰트 변경, 텍스트 내용 변경
- 이미지 크기 변경
- 애니메이션, 트랜지션
📖 Repaint
💬 정의
- reflow가 발생한 후 새로 계산된 Render Tree를 다시 화면에 그려주는 과정(paint)
- reflow가 발생해야 repaint가 발생하는것 아니며 visibility, bgcolor같은
레이아웃에 영향을 주지 않는 경우에는 repaint만 발생 - 전체 픽셀을 다시 계산하는 reflow보다는 비용이 적게 발생
😍 참조
- Reflow와 Repaint가 발생하는 속성 및 최적화 방법은 참조 사이트를 확인하자
- 석진님의 티스토리
