CSS Reflow, Repaint

Reflow

• 대화형 사이트에서 업데이트 한 후와 같이 browser가 웹 페이지의 일부 또는 전부를 다시 처리하고 그려야할 때 Reflow가 발생한다.
• 생성된 DOM 노드의 레이아웃 수치(너비, 높이, 위치 등) 변경 시
  영향 받는 모든 노드(자신, 자식, 부모, 조상 등 = 결국 모든 노드)의
  수치를 다시 계산하여(Recalculate) Render 트리를 재생성하는 과정

 

Repaint (=Redraw)

• Reflow 과정이 끝난 후, 재생성된 Render 트리를 다시 그리는(paint) 과정

 

 

---

 

Reflow 과정이 일어나는 상황

• Window Resizing
  
  • Viewport 변화는 Global Layout에 영향
• Font 변경
  
  • height 계산에 영향을 주므로 Global Layout에 영향
• 스타일 추가 또는 제거
• 내용 변경
  • Input Box에 텍스트 입력 등의 변화
• :hover 와 같은 CSS Pseudo Class
• 클래스 Attribute의 동적 변화
• 스타일 Attribute의 동적 변화
• JavaScript를 통한 DOM 동적 변화
• Element에 대한 offsetWidth, offsetHeight 계산시 (화면에서 보여지는 좌표)

 

 

---

 

Reflow 최적화

• 최대한 DOM 트리의 말단 노드에만 클래스 사용
• 인라인 스타일 최대한 배제하기
• 애니메이션은 가급적 position: absolute 또는 position: fixed 사용하기
• Quality와 Performance 사이에서 적당히 타협하기
• 테이블 레이아웃 피하기
• JavaScript를 통한 스타일 변화는 최대한 Grouping 하기
• CSS 하위 선택자는 필요한 만큼만 쓰기
• 일부 속성과 메서드는 자주 사용할 때 캐싱하기

 

 

---

Reference

• Reflow - MDN
• Minimizing browser reflow
• CSS Triggers
• Rendering: repaint, reflow / relayout, restyle