리플로우(Reflow) 와 리페인트(Repaint)
Reflow
- 노드의 크기 또는 위치가 변경되어 현재 레이아웃에 영향을 미쳐 배치를 다시 해야하는 경우 발생
- 변경된 요소에 영향을 받는 자식 노드들의 위치도 재 계산이 들어가기 때문에 재 계산된 결과를 그려주는 Repaint 단계도 실행 되기 때문에 렌더링 성능 향상을 위해서는 Reflow를 최대한 줄여야한다.
[Reflow가 일어나는 경우]
- Window Resize ⇒ viewport 변화는 Global Layout에 영향
- 폰트 변경 ⇒ height 계산에 영향을 주므로 Global Layout에 영향
- 스타일 추가 / 제거
- 텍스트 변화 (input box 텍스트 입력 등)
- 클래스 Attribute의 동적 변화
- JS를 통한 DOM 동적 변화
- 엘리먼트 위치 값(offsetWidth / offsetHeight) 계산 시
- 이미지 크기 변경
- 요소의 위치 / 크기 변경
- 등등등
Repaint
- Reflow가 발생한 뒤나 단순한 스타일 변경 후에 발생
- CSS 스타일 속성 중에서도 Reflow를 일으키는 속성들이 있기 때문에 성능 최적화를 위해서는 Reflow를 피할 수 있는 속성으로 대체해서 사용하는 것이 좋다.
성능 관점에서 본 Reflow 와 Repaint
- 수정된 렌더 트리를 다시 렌더링하는 과정에서 발생하는 것으로 웹의 성능을 떨어뜨리는 주된 요인이다. 극단적인 경우, CSS 효과로 인해 Java Script 의 실행 속도가 느려질 수도 있다.
- 특히 Reflow는 엘리먼트의 위치와 길이 등을 다시 계산하여 문서의 일부 혹은 전체를 다시 렌더링하기 때문에 그만큼 연산과 재배치가 많이 일어나 성능 최적화를 위해서는 Reflow를 피할 수 있는 방법을 택해야 한다.
성능 최적화 (= Layout, Paint 비용 줄이기)
Reflow 와 Repaint를 유발하는 속성을 사용하지 않고, GPU가 처리 할 수 있는 변형을 이용하여 같은 효과를 구현 한다.
- left/top에 의한 이동은 transform : translate을 이용
- show/hide는 alpha값을 이용하는 opacity를 이용
[참고]