리플로우와 리페인트

지난 면접에서 '리플로우와 리페인트의 차이점'에 대해서 질문을 받은적이 있다.

마침 지난 포스팅 브라우저 렌더링 과정에서 언급했던 기억이 있어서 반가웠지만, 입이 떨어지지 않았다.

왜냐면, 난 잘 모르니까..! 

 

그런 이유로 리플로우와 리페인트에 대해 작성해보고자 한다.

 

생성된 DOM 노드의 레이아웃 수치(너비, 높이, 위치 등) 변경 시 영향 받은 모든 노드의(자신, 자식, 부모, 조상(모든 노드) ) 수치를 다시 계산하여(Recalculate), 렌더 트리를 재생성하는 과정이며 또한, Reflow 과정이 끝난 후 재 생성된 렌더 트리를 다시 그리게 되는데 이 과정을 Repaint 라 한다.

Reflow

Reflow는 렌더링 엔진에서 요소를 배치하는 과정을 의미한다. 렌더 트리 구축 단계에서 DOM 트리와 스타일 규칙을 합쳐서 렌더 트리를 만들고, 여기에서 reflow를 통해 각각의 요소들의 레이아웃을 위치시킨다.

여기서 렌더 트리는 DOM 요소를 기반으로 만들어지지만, 완전히 대응되지는 않는다. DOM 트리가 문서의 구조를 나타낸다면 렌더 트리는 문서의 시각적 구조를 나타낸다. 예를 들어 스타일에 display: none 속성이 있다면 DOM에는 존재하지만 시각적으로는 없기에 렌더 트리에는 할당되지 않는다.

reflow가 발생하는 경우는 다음과 같다.

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

Repaint

Repaint는 렌더 트리가 탐색되고 paint 메서드가 호출되어서 UI 기반의 구성요소를 사용해서 그리는 과정이다. repaint가 이루어지기 위해서는 렌더트리가 있어야 하고 따라서 Reflow 작업이 이루어진 후에 repaint 작업이 이루어지는 것을 알 수 있다. 화면의 구조가 변경이 될 때는 reflow와 repaint가 모두 발생한다.

다만 repaint가 발생하기 위해서 항상 reflow가 발생해야 하는 것은 아니다. reflow가 발생하지 않고 repaint만 발생하는 경우도 있는데, 예를 들면 레이아웃에 영향을 주지 않는 엘리먼트 개별의 변화에 대해서는 repaint만 발생한다. color, background-color, visibility 같은 속성이 그러한 경우이다.

 

 

*참고자료

Reflow, Repaint을 알아보자!