Reflow / Repaint

Reflow(리플로우)

• 생성된 DOM 노드의 레이아웃이 변경될 때, 관련된 모든 노드의 수치를 재계산하여 렌더링 트리를 재생성하는 과정

• width / height / padding / margin 등 레이아웃에 영향을 주는 모든 속성들은 리플로우를 발생시킬 수 있다.

Repaint(리페인트)

• 리플로우 과정 후, 재 생성된 렌더링 트리를 다시 레이어에 그리는 과정

• color / border / background 등 시각적인 요소가 변경되는 경우 리페인트가 발생할 수 있다.

Reflow 와 Repaint를 최소화 하는 방법

1. CSS Transform 속성을 사용한다.

2. JS에 내장된 requestAnimationFrame 함수를 사용한다.

3. DOM의 변경사항을 일괄처리한다. (documentFragment)

4. 계산된 스타일을 변수에 캐싱한다.

5. 되도록 실행 사이클 내에 처리할 수 있도록 한다.

6. <table> 레이아웃은 사용을 지양한다.