Reflow와 Repaint

🔄Reflow

Reflow는 브라우저가 페이지의 레이아웃을 다시 계산하는 과정을 말합니다.

HTML과 CSS로 구성된 웹 페이지에서 DOM의 구조나 CSS 스타일이 변경되면, 브라우저는 각 요소가 화면에 어떻게 배치되는지에 대해서 다시 계산해야 합니다.
해당 과정은 화면에 존재하는 모든 요소들에 대해서 영향을 줄 수 있기 때문에 비용이 많이 발생하는 작업입니다.

🔍Reflow가 발생하는 원인

1. 새로운 요소 추가 또는 제거
   • DOM에 새로운 요소를 추가하거나 기존 요소를 제거할 때
2. 요소의 스타일 변경
   • width, height, margin, padding 등의 속성을 변경할 때
3. 윈도우 크기 변경
   • 브라우저 창의 크기를 조절할 때
4. CSS 변경
   • CSS 파일을 변경하고 다시 적용할 때

위 원인들 외에도 여러가지의 원인을 통해 Reflow가 발생합니다.

💡Reflow 최소화 방법

1. 레이아웃 변경 최소화하기
   • 예: classList.add()를 한번에 여러 개 적용하지 않고, 하나의 클래스로 합쳐서 적용
2. 애니메이션을 transform과 opacity 속성으로 처리하기
   • width, height 대신 transform: scale()을 사용
3. 오프스크린(Offscreen) 작업하기
   • DOM 조작을 display:none 상태에서 하고, 변경 후 다시 보이게 설정
4. 애니메이션 최적화
   • will-change 속성을 사용하여 브라우저에 미리 최적화를 요청

---

🎨Repaint

Repaint는 브라우저가 요소의 스타일을 변경한 후 다시 화면에 렌더링하는 과정입니다.
Reflow와 달리 요소의 위치나 크기는 변경되지 않고, 단순히 시각적인 스타일만 변경될 때 발생합니다.

🔍Repaint가 발생하는 원인

1. 색상 변경
   • color, background-color,border-color 등의 스타일 변경 시
2. 배경 이미지 변경
   • background-image 속성을 변경할 때
3. 가시성 변경
   • visibility: hidden을 적용할 때(display:none은 Reflow 발생)

위 원인들 외에도 여러가지의 원인을 통해 Repaint가 발생합니다.

💡Repaint 최소화 방법

1. 불필요한 스타일 변경 줄이기
   • 한 번에 여러 속성을 변경하는 것이 아니라, 최소한의 변경만 수행
   • color와 background-color 같은 속성을 자주 변경하지 않도록 조정
2. 애니메이션 최적화
   • opacity와 transform 속성은 GPU가속을 사용할 수 있어 성능이 뛰어남
   • width,height 대신 scale()을 사용하면 Reflow없이 Repaint만 발생
3. visibility: hidden vs display: none
   • display: none -> Reflow 발생(레이아웃 재계산 필요)
   • visibility: hidden -> Repaint만 발생(레이아웃 유지, 단순 숨김 처리)

---

📌Repaint는 Reflow보다 성능 비용이 적지만 빈번하게 발생되면 웹 페이지 성능에 부정적인 영향을 줄 수 있기 때문에 효율적으로 관리하는 것이 중요합니다.