Html/Css
리플로우와 리페인트
- 사용자가 브라우저 화면을 늘리거나 줄이는 등의 변화되는 상황이 생기면 화면에 있던 요소들이 바뀌게 된다.
- 화면에 나타는 모습을 바꾸기 위해 모든 요소의 위치와 크기를 다시 계산하고 다시 그려주는데, 렌더링 과정의 레이아웃을 반복해 수행하는 것을 리플로우,페인트 과정을 반복해 수행하는 것을 리페인트라고 한다.
리플로우와 레피엔트 최적화
- DOM은 변경되면 렌더 트리를 다시 구축하기 때문에, 변경될 때마다 리플로우와 리페인트를 다시 해야 한다.
- 리플로우는 렌더링을 다시 하는 것이기 때문에 배치를 위한 연산을 해야 하고 실제로 CPU를 많이 차지한다.
- 리페인트는 페인트를 다시 하는 것이라 픽셀을 다시 화면에 찍어 그려야 하므로 GPU를 많이 차지한다.
- 초당 60프레임을 유지시키던 프레임의 수가 브라우저의 과부하로 인해 줄어드는 현상을 말하는 프레임 드랍의 대표적인 예시이다.
- 없어진 프레임은 렌더링 엔진이 인식할 수 없어 렌더링되지 않으므로 최적화가 필요하다.
CSS에서 레이아웃,페인트를 발생시키는 속성들
- 리플로우 시 리페인트는 필연적으로 일어나므로 가능하다면 리플로우가 발생하는 속성보다 리페인트만 발생하는 속성을 사용해주는 게 좋다.
- 페인트 과정은 유저에게 화면을 보여주기 위해 그리는 필수적인 과정이라, 브라우저 렌더링의 최적화 과정을 수행하고자 한다면 레이아웃이 일어나는 상황을 최대한 피하는 것이 좋기 때문에 해당 속성을 알아두는 것이 중요하다.
- 대개 위치와 너비에 관련된 속성들이 많으며, left속성 중 left-top, left-bottom 속성을 사용하면 위치가 변경되며 레이아웃을 발생시키는 속성이다.
- 이 속성을 가지고 애니메이션을 만들 때는 프레임 유지를 보장하기 어려워진다.
- 따라서 이 속성을 피해 transform이라는 속성을 사용하며, translate를 사용하면 좌표 값을 사용해 위치를 이동하지만, 레이아웃을 발생시키지 않고 페인트만 발생시키는 쪽으로 렌더링 과정이 일어나기 때문에 유지하고자 하는 프레임 수를 기대할 수 있다.
리플로우가 일어나는 대표적인 속성
- 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,vertical-align…
리페인트가 일어나는 대표적인 속성
- background,background-image,background-position,background-repeat,background-size
- border-radius,border-style
- box-shadow
- color
- line-style,outline,outline-color
- clear
- display,visibility
- float
- font-family,font-size,font-weight…
영향을 주는 노드를 줄인다.
- JavaScirpt + CSS 를 조합한 애니메이션이 많거나, 레이아웃 변화가 많은 요소의 경우 position을 absolut 또는 fixed를 사용해주면 영향을 받는 주변 노드들을 줄여줄 수 있다.
- fixed와 같이 영향을 받는 노드가 전혀 없는 경우 리플로우 과정이 필요 없기 때문에 리페인트 연산 비용만 들일 수 있다.