Reflow와 Repaint가 실행되는 시점

Reflow와 Repaint 실행되는 시점

• 해당 작업은 렌더링과 연관된 작업.
• 두 작업은 렌더링 방식의 Layout, Paint 단계가 다시 일어난다고 생각하면 됨.

---

Reflow란?

• DOM의 레이아웃(위치, 크기 등)을 다시 계산하는 과정.
• 이 때, 관련된 모든 HTML 요소의 수치를 다시 계산하여 렌더 트리를 재구축.
• 관련 모든 요소들의 배치를 재계산하므로 성능 비용이 큼.

---

Repaint란?

• Repaint의 재구축된 렌더 트리를 다시 그리는 과정
• 레이아웃은 그대로, 시각적 속성의 요소를 다시 그리는 과정.
• 뜻을 직역하여, Paint 단계가 다시 수행된다고 생각하면 됨.
• 레이아웃 계산 없이, 픽셀만 다시 그리므로 비교적 성능 비용은 적음.

---

Reflow가 실행되는 시점

• DOM 구조 변경(요소 추가/삭제)
• CSS 스타일 추가, 삭제, 변경
• 클래스 속성, 스타일 속성의 동적 변화 시
• JavaScript를 통해 DOM 동적 변화 시
• 요소에 대한 offsetWidth 와 offsetHeight(화면에 보여지는 좌표) 수치 계산 시.
• CSS 애니메이션, 트랜지션.
• 궁극적으로 레이아웃 변경 시, DOM 트리에 있는 다른 노드에 영향을 줌

---

Repaint가 실행되는 시점

• 기본적으로, Reflow가 실행되면 그 뒤에 실행됨.
• 시각적 속성의 요소 변경 시
• 배경색(background-color) 변경
• 글자색(color) 변경
• visibility 변경
• box-shadow, outline 등의 시각 효과 변경

---

Reflow와 Repaint를 줄이기 위한 노력

• 인라인 형식의 스타일 작성 자제
• 애니메이션 퀄리티와 Reflow 성능의 절충안을 고려
• CSS에서의 JavaScript 표현식 사용 자제
• 자주 사용하는 것은 캐싱

---