Reflow

• 렌더링 과정 중 레이아웃을 반복해 수행하는 것 (매우 고비용)
• 문서 내 노드들의 레이아웃, 포지션을 재계산 후 다시 배치
• Repaint보다도 더 심각한 퍼포먼스 저하를 유발시키는 프로세스
• 특정 엘리먼트에 대한 Reflow 발생 시, 페이지에서의 해당 요소는 즉시 Reflow State가 되며 해당 엘리먼트의 자식요소와 부모, 조상 요소 역시 레이아웃 계산을 진행 (대부분의 리플로우는 페이지 전체의 렌더링을 다시 일으킴)

Repaint

• 렌더링 과정 중 페인트 과정을 반복해 수행하는 것 (고비용)
• 엘리먼트의 스킨에 변화가 발생하지만, 레이아웃에는 영향을 미치지 않을 때 유발 (visibility, outline, background-color 등의 변화)
• Repaint는 해당 행위가 발생하는 순간, 문서내 DOM tree의 다른 노드들의 스킨까지도 검증해야 하므로 비용이 높음

Reflow 또는 Repaint 유발 요인

• 웹페이지는 화면 구성이 완료된 후 개발자의 의도에 따라 바뀌거나, 사용 환경에 따라 동적인 변화가 발생할 수 있음

• 특정 엘리먼트에 스타일변화가 발생했을 때, 그 개체가 가진 자식요소에 대한 레이아웃 재정리를 위해 Reflow가 실행

  <Reflow 유발 요인>
  - 윈도우 리사이징
  - 폰트의 변화
  - 스타일 추가 또는 제거
  - 내용 변화 (인풋박스에 텍스트 입력 등..)
  - :hover와 같은 CSS Pseudo Class
  - 클래스 Attribute의 동적 변화
  - JS를 통한 DOM 동적 변화
  - 엘리먼트에 대한 offsetWidth / offsetHeight (화면에서 보여지는 좌표) 계산시
  - 스타일 Attribute 동적변화
  

  <aside> 💡 어떠한 변화가 발생했을 때 브라우저는 최소한의 대응을 하도록 설계되었으며 만일 특정 엘리먼트의 color값에 변화가 발생한다면 오직 해당 엘리먼트의 repaint만을 유발. 하지만 엘리먼트의 포지션에 변화가 발생했을 경우에는 해당 엘리먼트의 Repaint는 물론 레이아웃까지도 유발(Reflow). html 엘리먼트의 폰트사이즈를 키우는 것과 같은 커다란 변화들은 전체 Render Tree의 Repaint와 Reflow를 유발시킴.

  </aside>