[Web] Reflow와 Repaint, Reflow 최적화
Q. Reflow와 Repaint가 실행되는 시점은 언제인가요?
Reflow
렌더링 과정 중 Layout(배치) 단계가 다시 실행되는 것을 의미한다.
※ Layout: 뷰포트 내에서 노드의 정확한 위치와 크기를 계산하는 단계
생성된 DOM 노드의 레이아웃 수치(너비, 높이, 위치 등) 변경 시, 영향을 받은 모든 노드의 수치를 다시 계산하여 렌더 트리를 재생성하는 과정이다.
문서 내 노드들의 레이아웃, 포지션을 다시 계산하여 렌더트리를 다시 그리는 과정이기 때문에, Repaint보다 더 심각한 성능 저하를 유발시킨다.
Repaint
렌더 트리가 탐색되고 paint 메서드가 호출되
어 UI기반의 구성요소를 사용해서 화면에 그리는 과정이다.
※ Paint(그리기): 렌더 트리의 각 노드를 화면의 실제 픽셀로 변환하여, 계산한 위치/크기를 기반으로 화면에 그리는 단계이다.
Reflow 과정이 끝나면, Repaint가 발생하여 재생성된 렌더 트리를 다시 그리게 된다.
레이아웃에 영향을 주지않는 요소 개별의 변화(color, background-color, visibility 등)에 대해서는 Repaint만 발생한다. (Reflow X)
Reflow가 실행되는 시점
- DOM 노드의 추가/제거
- DOM 노드의 위치 및 크기(margin, padding, border, width, height 등) 변경
- CSS3 애니메이션과 트랜지션
- 폰트, 텍스트 내용, 이미지 크기 변경
- 윈도우 리사이징
- offsetWidth, offsetHeight, scrollTop, scrollLeft 등과 같은 계산된 스타일 정보 요청
offsetWidth, offsetHeight: border, padding, 스크롤바 사이즈를 포함한 값
scrollTop, scrollLeft: 각각 수직, 수평 스크롤 바 위치를 나타냄 - 유저 인터랙션으로 발생하는 hover 효과 등
Repaint가 실행되는 시점
- 가시성이 변경되는 순간 (opacity, background-color, visibility)
- Reflow가 실행된 순간 뒤에 실행
Reflow를 최소화하여 성능저하를 막는 방법
1) 스타일을 변경할 경우, 가장 하위 노드의 클래스를 변경한다. (영향받는 노드를 최소화)
2) 인라인 스타일(태그가 적용되는 라인에 스타일 작성)을 사용하지 않는다.
- 레이아웃에 영향을 미쳐 추가 reflow를 발생시킬 뿐만 아니라, 이후 유지보수가 어려움
3) 애니메이션이 있는 노드는 position을 fixed 또는 absolute로 지정한다.
- 많은 reflow 비용을 발생시키는 애니메이션의 position 속성을 fixed 또는 absolute로 주면, 전체 노드에서 분리시켜 해당 노드에서만 reflow가 발생하도록 제한시킬 수 있음
4) <table> 레이아웃을 피한다.
- 테이블 안의 컨텐츠 값에 따라 테이블 너비가 계산되므로, 테이블 컨텐츠의 작은 변경만 있어도 너비가 다시 계산되어 테이블의 모든 노드들이 reflow가 발생
5) CSS 하위 선택자를 최소화 한다. (reflow 횟수를 줄이는 방법이 아니라, 렌더 트리 계산을 최소화 하는 방법)
6) 숨겨진 노드의 스타일을 변경한다.
- display: none으로 숨겨진 노드를 변경할 때는 reflow가 발생하지 않으므로, 숨겨진 노드를 표시하기 전에 노드의 컨텐츠를 먼저 변경한 후에 화면에 나타내면 reflow를 줄일 수 있음
7) DOM 사용을 최소화한다.
- document.createDocumentFragment()를 사용하여 한번에 DOM을 추가하여, DOM 접근을 최소화할 수 있음
8) 캐시를 활용한다.
브라우저는 레이아웃 변경을 큐에 저장했다가 한번에 실행하여 reflow를 최소화하는데, scrollTop과 같은 계산된 스타일 정보를 요청할 때마다 정확한 정보 제공을 위해 큐를 비우고 모든 변경사항을 적용하는 낭비가 발생함
이를 최소화하기 위해, 수치에 대한 스타일 정보를 변수에 저장하여 정보 요청 횟수를 줄여 reflow를 최소화할 수 있음
References