리플로우와 리페인트에 대하여

리플로우 Reflow

리플로우는 플로우가 다시 반복된다는 뜻이다. 렌더 트리를 레이아웃하는 과정이 플로우다. 플로우 과정은 DOM 트리를 구성한 후에 스타일을 합쳐 렌더트리의 과정에서 크기, 위치등을 담당한다.

각각 문서의 위에서 아래로 그리고 왼쪽에서 오른쪽으로 문서를 읽어가면서 필요한 부분에 대해 서버와 통신을 한 후에 DOM트리+스타일을 합치고, 이를 표현하기 위한 렌더트리를 구성하는 과정에서 display 그리고 width, height, position 등을 계산하는 과정이다.

 

리플로우는 이 과정을 다시 거치는 것을 말한다.

리플로우가 발생하는 경우는 다음과 같다.

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

리페인트 Repaint

리페인트 역시 페인트가 다시 일어나는 과정이다. 렌더트리과정에서 플로우를 통해 계산한 것을 그리는 과정이 페인트이다. 그리는 것은 실제 웹에 보여주는 것을 말한다. 색, 보더, 형태 등 우리가 보는 뷰의 형태로 표현하는 것이다.

 

즉 리페인트는 리플로우로 인해 계산된 것을 다시 그리는 것이다.

 

리플로우와 리페인트에 관심을 가져야 하는 이유

웹 개발자는 성능 최적화를 중요시 해야한다. 사용자는 당연히 빠르고 불편함이 없는 페이지를 선호한다. 그렇기 위해서는 빠른 렌더링을 위해 여러 방법이 있지만 리플로우와 리페인트를 최대한 줄이는 것이 성능최적화의 좋은 방법이다.

 

리플로우 리페인트 줄이기

1. 사용하지 않는 노드에는 visibilty:invisible 보다는 display:none 을 사용하기

visibilty:invisible는 레이아웃 공간을 차지하기 때문에 리플로우 대상이 된다.

 

2. 리플로우 리페인트가 발생하는속성 사용 피하기

 

3. 영향을 주는 노드 줄이기

 

4. 프레임 줄이기