리플로우와 리페인트

리플로우(Reflow) : 브라우저 화면 조절, 타 사이트로 이동과 같은 웹 인터렉션으로 인해 렌더링 과정의 레이아웃을 반복 수행하는 것 

리페인트(Repaint) : 웹 인터랙션으로 인해 페인트 과정을 반복 수행하는 것 

 

리플로우와 리페인트의 최적화

- DOM은 변경이 되면 렌더트리를 다시 구축하기 때문에 변경이 될 때마다 리플로우와 리페인트를 다시 해야함 

- 리플로우 과정은 렌더링을 다시하는 것이기 때문에 배치를 위한 연산을 해야 해 실제로 CPU를 많이 차지함

- 리페인트 과정은 페인트를 다시 하는 것으로 픽셀을 다시 화면에 그려야 하기 때문에 GPU를 많이 차지함 → 프레인 드랍 현상과 연관이 있음

* 프레임 드랍? 초당 60프레임으로 유지시키던 프레임 수가 브라우저 과부하로 인해 줄어드는 현상 

- 줄어들어 없어진 프레임은 렌더링 엔진이 인식할 수 없음 → 렌더링 엔진은 드랍된 프레임을 브라우저 화면에 그리지 못함 

 

최적화 방법

1.1 불필요한 레이아웃을 줄인다 

- 레이아웃 과정에서 불필요하게 계산할 것이 많아지면 엔진이 과부하가 생길 수 있음 

- CSSOM 트리의 CSS 속성 중에 레이아웃을 발생 시키는 속성들이 있음 → 해당 속성을 피하면 레이아웃 발생 수를 줄일 수 있음

 

1.2 CSS에서 레이아웃, 페인트를 발생 시키는 속성들 

- 리플로우가 발생하는 속성보다 < 리페인트만 발생하는 속성을 사용해 주늑 서이 좋음 

리플로우가 일어나느 대표적인 속성

position	width	height	left	top	right
bottom	margin	padding	border	border-width	clear
display	float	font-family	font-size	font-weight	line-height
min-height	overflow	text-align	verical-align	..	..

리페인트가 일어나는 대표적인 속성

background	background-image	background-position	background-repeat	background-size	border-radius
border-style	box-shadow	color	line-style	outline	clear
disply	float	font-family	visibility	font-size	outline-color

 

2. 영향을 주는 노드를 줄인다

- 자바스크립트 + CSS를 조합한 애니메이션이 많거나 레이아웃 변화가 많은 요소의 경우 position을 absolute 또는 fixed를 사용해 주면 영향을 받는 주변 노드들을 줄일 수 있다