Reflow와 Repaint가 실행되는 시점 / 차이점에 대해서 설명해 주세요

<aside> 💡

답변

reflow는 레이아웃을 다시 계산하는 과정이고, repaint는 그 계산 결과를 화면에 다시 그리는 과정이라고 할 수 있습니다.

• Reflow 실행 시점
  • DOM의 구조가 변경
  • CSS 스타일이 변경
    • CSS에서 요소의 width나 height 속성을 변경
    • CSS3 애니메이션과 트랜지션. 애니메이션의 모든 프레임
  • offsetWidth와 offsetHeight의 사용. offsetWidth와 offsetHeight 속성을 읽으면, 초기 리플로우가 트리거
  • 유저 행동. 유저 인터랙션으로 발생하는 hover 효과, 필드에 텍스트 입력, 창 크기 조정, 글꼴 크기 변경, 스타일시트 또는 글꼴 전환 등을 활성화하여 리플로우를 트리거
• Repaint 실행 시점
  • 가시성이 변경되는 순간 (opacity, background-color, visibility, outline)
  • 요소의 레이아웃은 그대로이고, 색상이나 배경 등의 스타일만 변경되는 경우
  • Reflow가 실행된 순간 뒤에 실행
  • reflow보다는 비용이 덜 들지만, 여전히 성능에 영향을 줄 수 있다. </aside>

최적화 방법

1. reflow를 유발하는 CSS 속성 사용을 최소화

width, height, margin, padding, border 등의 속성은 요소의 레이아웃을 다시 계산하게 하므로 reflow 트리거. 가능한 한 미리 CSS에서 스타일을 설정해 초기 로드 시에만 계산이 이루어지도록 하고, 이후에는 변경하지 않는 것이 좋다.

1. CSS 애니메이션 최적화

애니메이션에 transform과 opacity 속성만을 사용하는 것이 성능에 유리. 이 두 속성은 GPU 가속을 사용할 수 있어 reflow를 일으키지 않고 repaint만 발생시키므로 CPU 자원을 적게 사용.

1. will-change 속성 사용

CSS의 will-change 속성을 사용하여 브라우저에 특정 요소가 변경될 것이라고 미리 언질을 줄 수 있다. 예를 들어, will-change: transform으로 미리 GPU에서 요소를 준비하게 하여 reflow 및 repaint에 미치는 영향을 줄일 수 있다. 하지만 will-change 속성은 너무 자주 사용하면 메모리 낭비가 발생하므로 필요한 요소에만 적용.

브라우저 렌더링 파이프라인 – 실습 중심 보강 자료