🖋️ Repaint 와 Reflow 에 대해서 이해하기

웹 개발에서 Repaint 와 Reflow 개념을 이해하기

(성능에 영향을 미칠 수 있는 브라우저 렌더링 단계)

• 성능 최적화
• 사용자 경험 보장

• Reflow(레이아웃)

  • 브라우저가 전체 페이지 또는 페이지 일부의 레이아웃을 계산하는 프로세스
  • 문서에 있는 요소의 위치와 크기를 계산하는 작업이 포함

  • 리플로우가 발생하는 경우

    • 요소의 크기나 위치가 변경될 때
    • 페이지의 콘텐츠가 변경될 때
    • 페이지 렌더링, 처음에 완료될 때
    • CSS 의사 클래스 상태가 변경될 때
    • 스타일시트 추가 또는 제거하거나 요소의 ClassList 를 수정할 때

  • 성능에 미치는 영향

    • 전체 문서 또는 문서의 상당 부분에 대한 스타일과 레이아웃을 다시 계산
    • 복잡한 웹 페이지나 응용 프로그램의 성능이 저하 가능
    • 계산 비용이 많이 드는 프로세스

  • 최적화 팁

    • 리플로우의 영향을 줄이기 위해 DOM 의 Depth 를 최소화
    • 동적으로 변경되는 인라인 스타일을 피하기
    • 리플로우를 방지하기 위해 브라우저에서 최적화할 수 있으므로
      애니메이션에는 '변환' 및 '불투명도'를 사용
    • 리플로우 횟수를 최소화하기 위해 DOM 및 스타일 변경을 일괄 처리
      예를 들어 React의 상태 및 효과 후크를 사용하여 일괄 업데이트를 수행
    • 레이아웃 속성(offsetWidth, scrollHeight 등)에 너무 자주 액세스 지양

• Repaint

  • 요소가 시각적 스타일을 변경하지만 레이아웃은 변경하지 않는 경우 발생
  • 가시성, 배경색 또는 윤곽선 변경이 포함
  • 레이아웃 재계산이 포함되지 않지만
    여전히 브라우저가 요소의 시각적 표현을 업데이트

  • 성능에 미치는 영향

    • 일반적으로 리플로우보다 비용이 저렴
    • 과도한 다시 그리기는 특히 저전력 장치나
      복잡한 UI에서 성능 문제 발생 가능

  • 최적화 팁

    • 자주 변경되는 요소를 최적화하려면
      레이어(will-change, transform, opacity)를 사용
    • 브라우저가 쉽게 최적화할 수 있는 속성을 사용하여
      애니메이션과 전환을 효율적으로 유지
    • 사용자 경험에 영향을 주지 않는 불필요한 시각적 변화 지양

• 📢 React 에서 활용

  • 구성 요소는 상태 또는 속성 변경에 응답하여 리렌더링
  • DOM 이 업데이트되면 reflow 및 repaint 가 발생

  • 사용법

    • 불필요한 렌더링 최소화
      • 불필요한 리렌더링을 방지
      • React.memo, PureComponent, useMemo, useCallback
        또는 shouldComponentUpdate를 사용
    • 일괄 업데이트
      • React는 이미 이벤트 핸들러 및 수명 주기 메서드에서
        발생하는 상태 업데이트를 일괄 처리
      • 레이아웃 스래싱을 줄이기 위해 상태 업데이트 시기를 고려
      • useReducer 사용
    • CSS 전환 및 애니메이션 사용
      • 시각적 변경의 경우 CSS 전환 및 애니메이션은
        reflow 및 repaint 를 트리거할 수 있는 JS 기반 애니메이션보다 더 효율적
      • 의사클래스 등 직접적인 CSS 코드로 설계
    • 긴 목록 가상화
      • 긴 목록이나 테이블의 경우 창 또는 가상화 기술
      • (예: react-window 또는 react-virtualized)을 사용하여 보이는 항목만 렌더링하는 것을 고려