Reflow & Repaint

Reflow와 Repaint는 웹 페이지의 렌더링 과정에서 발생하는 두 가지 중요한 개념이다.

이 개념을 이해하는 것은 성능 최적화에 큰 도움이 된다.

 

 

Reflow (리플로우)

• 정의: Reflow는 DOM 요소의 크기, 위치, 또는 구조가 변경될 때 발생한다. 예를 들어, 요소의 크기를 변경하거나, 새로운 요소를 추가하거나, CSS 스타일을 수정할 때 발생한다.
• 예시: 
  • 브라우저에서 텍스트의 폰트 크기를 변경할 때
  • 요소의 `margin`, `padding`, `border` 등을 수정할 때
  • 화면 크기가 변경될 때 (예: 창 크기 조절)
• 중요성: Reflow가 발생하면 브라우저는 레이아웃을 다시 계산해야 하므로 CPU와 메모리 자원을 소모하게 된다. 따라서 너무 많은 Reflow는 성능 저하를 일으킬 수 있다.

 

 

Repain (리페인트)

• 정의: Reflow가 발생하면 브라우저는 레이아웃을 다시 계산해야 하므로 CPU와 메모리 자원을 소모하게 된다. 따라서 너무 많은 Reflow는 성능 저하를 일으킬 수 있다.
• 예시: 
  • 배경색을 변경할 때
  • 글자의 색상을 바꿀 때
  • CSS 애니메이션으로 색상이 변화할 때
• 중요성: Repaint는 Reflow보다 성능에 미치는 영향이 적다. 하지만 너무 많은 Repaint도 성능에 영향을 미칠 수 있으므로 주의해야 한다.

 

 

요약

• Reflow: DOM 요소의 구조가 변경되어 레이아웃을 다시 계산해야 할 때 발생한다. 성능에 더 큰 영향을 미친다.
• Repaint: 요소의 스타일이 변경되지만 레이아웃이 변하지 않을 때 발생한다. 성능에 미치는 영향은 상대적으로 적다.

 

 

성능 최적화 팁

1. 배치 작업: DOM에 여러 번 접근하기보다는 변경할 내용을 한 번에 적용한다.
2. CSS 클래스 변경: 스타일을 직접 수정하기보다는 CSS 클래스를 추가/삭제하는 방식으로 변경한다.
3. 오프스크린 요소 사용: 변경이 필요한 요소를 화면 밖으로 이동시켜서 Reflow를 최소화한다.