렌더링 최적화] 리플로우 리페인트 (Reflow Repaint)

😎 렌더링 최적화] 리플로우 리페인트 (Reflow Repaint)

리플로우와 리페인트를 알기 위해

먼저 브라우저 렌더링 방식을 간단하게 알아보자.

✅ 기존 DOM 렌더링 방식 (브라우저 렌더링 방식)

1. 브라우저는 서버가 보내준 HTML 파일, CSS 파일을 해석(Parsing)하여 DOM 트리, CSSOM 트리를 만든다.
2. DOM 트리 + CSSOM 트리를 결합해 Render 트리를 만든다.
3. Render 트리로 각 노드의 위치와 크기를 계산한 레이아웃(Layout)을 만들고
   뷰포트(Viewport) 내에서 각 노드들의 위치와 크기를 계산한다.
4. Layout 계산이 완료되면 요소들을 화면상의 실제 픽셀로 변환하고, 레이어를 만드는 페인트(Paint)를 한다.
5. 생성된 레이어를 합성해서 실제 화면에 나타낸다. (Composite)

자세한 내용은 이전 글에서 확인 가능하다.

 

✅ 리플로우 리페인트

브라우저 성능 최적화를 하기 위해선 Reflow와 Repaint를 알아야 한다.

Reflow (Layout)

위에서 언급된 렌더링 과정을 거친 후 최종적으로 페이지가 그려진다고 해서 렌더링 과정이 모두 끝난 것은 아니다.

어떤 액션이나 이벤트에 따라 html 요소의 크기, 위치 등 레이아웃의 수정이 필요하면

그에 따라 영향을 받는 자식 노드나 부모 노드들을 포함하여 Layout 과정을 다시 수행하게 된다.

이 경우, Render Tree와 각 요소들의 크기, 위치를 다시 계산하고 이 과정을 Reflow라고 한다.

 

Reflow 발생 예시

• 페이지 초기 렌더링 (최초 Layout 과정)
• 윈도우 리사이징 (Viewport 크기 변경)
• 노드 추가, 제거
• 요소의 위치, 크기 변경 (width, height, margin, padding, border 등)
• font 변경
• 텍스트 내용, 이미지 크기 변경

Repaint (Paint)

Reflow의 진행만으로는 실제 화면에 반영되지는 않는다.

위에서 언급된 렌더링 과정과 같이 Render Tree를 다시 화면에 그려주는 과정이 필요하다.

결국, Paint 단계가 다시 진행되는 것이며 이를 Repaint 라고 한다.

하지만, Reflow가 진행돼야만 Repaint가 진행 되는 것은 아니다.

background-color, visibility 속성과 같이 Layout에 영향을 주지 않는 변경사항이 있을 경우에는

Reflow를 진행할 필요가 없기 때문에 Repaint만 진행하게 된다.

 

✅ 렌더링 최적화 방법 : Reflow, Repaint 최적화

Reflow 최소화를 통해 렌더링 최적화를 할 수 있다.

 

1. 사용하지 않는 노드에는 visibilty: invisible 대신 display: none 사용

visibility는 레이아웃 공간을 차지하기 때문에 Reflow의 대상이 되지만

display는 Layout 공간을 차지하지 않기 때문에 Render Tree에서 제외되므로

최적화를 위해서는 visibilty 대신 display 사용을 권장한다.

visibility, display보다 opacity속성을 사용한다면 성능면에서 더 효율적이다.

 

2. Reflow, Repaint를 발생시키는 속성 사용 자제

Reflow가 진행될 경우 Repaint도 함께 진행되기 때문에

가능하다면 Reflow를 발생시키는 속성보다 Repaint만 발생시키는 속성 사용을 권장한다.

 

Reflow 대표 속성 예시

width	height	margin	padding	overflow
border(width)	font(size,weight,family)	line-height	text-align	vertical-align

 

Repaint 대표 속성 예시

background(image,position,repeat,size)

border(radius,style)

box-shadow

color

text-decoration

 

3. 애니메이션이 있는 노드는 position fixed 또는 absolute로 지정한다.

애니메이션 효과는 많은 Reflow 비용을 발생 시킨다.

애니메이션이 필요한 노드에 position 속성을 fixed 또는 absolute로 설정하고,

해당 노드를 전체 노드에서 분리시켜 해당 노드에서만 Reflow가 발생하도록 제한하는 방법이 있다.

만약, 해당 노드에 position 속성이 적용이 되지 않았다면

애니메이션을 시작할 때 position 속성(fixed 또는 absolute)을 적용한 다음

애니메이션 종료 후 다시 원복시켜서 렌더링을 최적화 할 수 있다.

 

4. table 레이아웃을 자제한다.
<table>은 점진적으로 렌더링 되지 않고, 모두 로드된 다음 테이블 크기가 계산된 후에 화면에 그려지고

테이블 안의 컨텐츠 값에 따라 테이블 크기가 계산 된다.

즉, 테이블은 컨텐츠의 작은 변경에도 테이블 크기가 다시 계산되고 테이블의 모든 노드들에 Reflow가 발생한다.

그렇기 때문에 <table>을 레이아웃 용도로 사용하는 일은 피해야 한다.

 

5. CSS 하위 선택자를 최소화 한다.
이 방법은 Render Tree계산을 최소화 하는 방법이다.

CSS 하위 선택자가 많아지면 CSSOM의 깊이가 깊어지고, Render Tree를 만드는 시간이 증가하게 된다.

/* Bad */
.box ul li .btn{
  display: block;
}

/* Good */
.box .btn {
  display: block;
}

 

6. 숨겨진 노드의 스타일을 미리 변경한다.
예를 들어 display: none인 노드의 스타일을 변경할 때는 화면에 표시되지 않으므로 Reflow가 발생하지 않는다.

이렇게 숨겨진 노드를 화면에 표시하기 전에 노드의 스타일을 먼저 변경한 후 화면에 나타내면 Reflow를 줄일 수 있다.

 

7. DOM 사용 최소화

스크립트를 통해 DOM을 화면에 그려야할 경우

DOM을 하나씩 추가하는 것이 아니라 하나의 묶음으로 모은 후 한 번에 추가한다면 Reflow를 줄일 수 있다.

배치 업데이트를 의미하며 리액트에서는 이를 활용한다.

 

8. 프레임 최소화
0.1s에 1px씩 이동하는 요소보다 0.1s에 3px씩 이동하는 요소가

Reflow, Repaint 연산비용이 3배가 줄어든다고 볼 수 있다.

즉, 부드러운 효과(프레임)를 줄여서 성능 개선에 도움을 줄 수 있다.

 

 

❗ 정리

Reflow와 Repaint는 브라우저 렌더링 성능에 영향을 주는 개념이므로

Reflow와 Repaint를 이해 한다면 더 나은 성능 개선을 이끌어 낼 수 있기 때문에

특히, 프론트엔드 개발자라면 이것에 대한 이해는 꼭 필요하다.

 

 

 

참고

https://developers.google.com/speed/docs/insights/browser-reflow?hl=ko 

브라우저 리플로우 최소화  |  PageSpeed Insights  |  Google Developers