Reflow와 Repaint는 브라우저가 웹 페이지를 렌더링하는 과정에서 발생하는 개념이다.
브라우저 렌더링은 렌더 트리의 생성 이후 다음 두 단계를 거친다.
- Layout 단계 : 렌더 트리의 각 노드를 화면에 배치
- Paint 단계 : 배치된 노드들을 화면에 그려냄
Reflow는 Layout 단계에서 수정이 있을 때, Repaint는 Paint 단계에서 수정이 있을 때 발생한다.
Reflow
Reflow는 DOM 요소의 크기, 위치, 혹은 레이아웃이 변경될 때 발생한다.
브라우저는 페이지의 전체 레이아웃이나 일부를 다시 계산해야 하며, 이에 따라 렌더링 트리를 업데이트한다.
Reflow는 CPU를 사용한다.
언제 발생하나요?
- DOM 요소의 크기 또는 위치가 변경될 때(예 : width, height, margin, padding, border, top, left 등)
- DOM 요소가 추가, 삭제, 이동되었을 대
- 브라우저 창 크기를 변경했을 때
Reflow는 계산이 복잡하며 성능에 부정적인 영향을 줄 수 있다. 특히, 페이지에 많은 DOM 요소가 있을 경우 성능 문제가 더 심각해진다.
Repaint
Repaint는 요소의 스타일이 변경되어 화면에 다시 그려져야 할 때 발생한다. 하지만 레이아웃(위치, 크기)은 변경되지 않는다.
언제 발생하나요?
- 색상 변경(예 : color, backrground-color 등)
- visibility 속성 변경 등
Repaint는 Reflow에 비해 비용이 덜 드는 작업이다. 하지만 화면을 다시 그려야 하므로 여전히 성능에 영향을 줄 수 있다.
Repaint는 GPU를 사용한다.
Reflow와 Repaint를 최소화하는 방법
- CSS 변경 최소화: 불필요한 스타일 변경을 피한다.
- 애니메이션 position은 fixed, absoulute를 활용: 애니메이션, 트랜지션 등의 효과는 많은 Reflow를 발생시키는데, 이때 fixed나 absoulute로 position을 지정하면 해당 노드만 Reflow가 발생하게 만들 수 있다.
- 프레임 줄이기: 요소가 이동하는 순간마다 Reflow나 Repaint가 발생하게 되는데, 이러한 트랜지션이나 애니메이션의 주기나 효과를 간소화하면 성능을 개선할 수 있다.
- 인라인 스타일 사용 최소화: 인라인 스타일은 HTML이 파싱 될 때 레이아웃에 영향을 주어 추가적인 Reflow를 발생시킨다.
이 외에도 Reflow나 Repaint를 최소화하는 수많은 방법들이 존재한다.
