리플로우, 리페인트

Reflow, Repaint

리플로우는 렌더링 엔진이 노드(요소)를 재배치하는 과정을 말하며, 리페인트는 리플로우 과정을 거쳐 생성된 렌더 트리를 그려 화면에 출력하는 과정을 말합니다.

레이아웃 변경 => 리플로우 => 리페인트 => 화면 표시

이 과정은 DOM의 요소가 시각적으로 변경되었을 경우 발생합니다. 몇가지 예를 들어볼까요?

• 페이지 초기 렌더링
• 윈도우 리사이징(뷰포트의 변화)
• 노드의 추가 혹은 제거(레이아웃 변경)
• 노드의 위치 또는 크기 변경(레이아웃 변경)
• 애니메이션, 트랜스폼(레이아웃 변경)
• hover, active 등의 가상 클래스(레이아웃 변경)
• 폰트 변경 및 텍스트 콘텐츠 변경(높이 변경, 인풋박스 텍스트 입력)
• 이미지의 크기 변경
• 좌표 등 계산이 필요한 스타일 정보 요청

위와 같은 변화로 인해 해당 요소는 물론 주변 요소(부모, 형제, 자식)들까지도 영향을 받게 되며, 렌더링 엔진은 노드들의 크기, 위치 등을 다시 계산하여 배치하게 됩니다. 특히 리플로우는 화면을 다시 렌더링하기 때문에 성능에 저하를 일으킬 수 있으므로 최대한 이를 지양해야 하지만 피하는 것은 불가능하므로 최대한 줄일 수 있도록 노력해야 합니다.

리플로우 최적화

그렇다면 리플로우를 줄일 수 있는 방법은 무엇이 있을까요?

1. 인라인 스타일 피하기
   인라인 스타일은 HTML 파싱 과정에서 레이아웃에 영향을 미치며, 추가적인 리플로우를 발생시키므로 최대한 사용하지 않는 것이 좋습니다.

2. 애니메이션이 적용된 노드를 독립적으로 배치하기
   애니메이션 효과가 적용된 노드의 position 속성을 absolute 혹은 fixed를 주어 주변 노드들과의 배치를 분리하여 주변 노드들로의 영향을 최소화해줄 수 있습니다. (리페인트만 일어나게 됨)

3. 테이블을 레이아웃의 용도로 사용하지 않기
   테이블은 순차적으로 렌더링되지 않고 페이지가 모두 로드된 후에 테이블의 너비를 계산하여 렌더링됩니다. 또한 테이블 내 콘텐츠에 따라 너비가 계산되기 때문에 약간의 변화만으로도 테이블의 모든 노드들에 리플로우가 발생하게 되므로 이를 레이아웃 용도로 사용하지 않도록 해야합니다.

4. CSS 하위 선택자 최소화 하기
   CSS 하위 선택자가 많아질수록 CSSOM 트리의 깊이(Depth)가 깊어지게 되며, 렌더 트리를 생성하는 시간에 영향을 주게 되므로 하위 선택자 선택시 최대한 중간에 거치는 선택자가 없도록 해야합니다.

5. 좌표 요청 값을 변수에 저장하기
   변경되어야 할 좌표의 값을 미리 변수에 저장해서 다시 계산해야 하는 상황을 최소화할 수 있습니다.

6. DOM의 사용을 최소화 하기
   참고 블로그

리플로우 원인, 마크업 최적화

참고 블로그
https://webclub.tistory.com/346
https://devowen.com/463
https://velog.io/@young_pallete/Reflow-Repaint%EC%9D%84-%EC%95%8C%EC%95%84%EB%B3%B4%EC%9E%90