Reflow & Repaint

브라우저 렌더링 과정중 Render 트리에 있는 요소의 정보가 변하면 리플로우(Reflow)나 리페인트(Repaint)가 발생할 수 있다. 이에 대해 알아보자.

Reflow

Render 트리에 포함된 요소의 크기와 위치등을 계산하는 레이아웃(Layout) 단계가 다시 실행되는 것을 리플로우 라고 한다.

리플로우는 position, margin, width, height, padding, border, font-size 등의 속성이 변화하면 일어나게 되며 영향을 받는 모든 노드에 대해 Render 트리를 다시 생성하여 레이아웃 과정을 다시 거치게 된다.

Repaint

Render 트리에 포함된 요소의 색, 폰트 등의 스타일 속성이 변경되면 페인트(Paint) 단계가 다시 실행되고 이를 리페인트 라고 한다.

리페인트는 background, border-radius, color 등의 속성이 변화하면 일어나게 된다.

Reflow와 성능의 관계성
리플로우는 관련된 노드의 Render 트리를 다시 생성하고 리페인트 단계까지 거치게 되어 잦은 리플로우는 성능상의 이슈를 발생시키게 된다.
이를 최적화할 수 있는 방법은 다음과 같다.

• absolute나 fixed로 변경점이 많은 노드를 전체 노드에서 분리
• 인라인 스타일 최소화
• css 하위선택자 최소화
• relative 사용에 주의
• DOM 트리를 변경하지 않는 transform, opacity 속성 사용

참조
(유튜브) 브라우저는 어떻게 화면을 렌더링할까?
Reflow or Repaint(or ReDraw)과정 설명 및 최적화 방법