리플로우: 어떤 웹 인터랙션으로 인해 앞서 보았던 렌더링 과정의 레이아웃을 반복해 수행하는 것.
리페인트: 페인트 과정을 반복해 수행하는 것.
const div = document.createElement('div');
document.body.append(div);
div.textContent = 'hello world';이렇게 JavaScript 조작을 통해 변경이 일어나면, DOM 트리를 다시 구성하는 것을 시작해 CSSOM과 합쳐 새 렌더트리를 생성한다. 그리고 레이아웃과 페인트 과정을 또다시 거쳐 화면에 보여준다. DOM 조작은 리플로우, 리페인트가 일어나는 대표적인 예시이다.
<리플로우와 리페인트의 최적화>
-DOM은 변경되면 렌더트리를 다시 구축하기 때문에 변경될때마다 리플로우와 리페인트를 다시 해야 한다.
리플로우는 렌더링을 다시 하는 것이기 때문에 배치를 위한 연산을 해야해 실제로 CPU를 많이 차지한다.
리페인트는 페인트를 다시 하는 것이라 픽셀을 다시 화면에 찍어 그려야 하므로 GPU를 많이 차지한다. 그렇기 때문에 프레임 드랍(Frame Drop)현상과 직접적인 연관이 있다.
-렌더링 엔진은 드랍된 프레임을 브라우저 화면에 그리지 못한다. 이렇게 되면 유저는 해당 현상을 "화면이 멈춘다, 버벅인다"라고 느끼게 된다. 프레임 드랍 현상이 생기면 유저 경험(UX)에 좋지 않기 때문에 최적화를 고려해야만 한다.
1. 불필요한 레이아웃을 줄인다.
-CSSOM 트리의 CSS속성 중에 레이아웃을 발생시키는 속성들이 존재하고 있다. 이 속성을 사용하게 되면 그때마다 변경이 되어 렌더 트리를 만들고, 레이아웃을 발생시키고, 페인트를 하는 과정이 연속적으로 발생한다. 따라서 이런 레이아웃을 발생시키는 속성을 피하면 해당 과정이 발생하는 횟수를 줄일수있다.
# CSS에서 레이아웃, 페인트를 발생시키는 속성들
-리플로우 시 리페인트는 필연적으로 일어나므로 가능하다면 리플로우가 발생하는 속성보다 리페인트만 발생하는 속성을 사용해주는게 좋다.
-위치, 너비와 관련된 속성이 많다. left속성은 레이아웃을 발생시키는 속성이다. 따라서 이 속성을 가지고 애니메이션을 만들때는 프레임 유지를 보장하기 어려워진다.
-그래서 이 속성을 피해 transform이라는 속성을 사용한다. transform에 있는 translate를 사용하면 좌표 값을 사용해 위치를 이동하지만, 레이아웃을 발생시키지 않고 페인트만 다시 발생시키는 쪽으로 렌더링 과정이 일어나기 때문에 유지하고자 하는 프레임수를 기대할수있다.
-리페인트가 일어나지 않게 해주는 opacity라는 속성도 있다. visibility/display 보다 opacity를 사용하는 것이 성능 개선에 도움이 된다.
2. 영향을 주는 노드를 줄인다.
-javascript + css를 조합한 애니메이션이 많거나, 레이아웃 변화가 많은 요소의 경우 position을 absolute 또는 fixed를 사용해주면 영향을 받는 주변 노드들을 줄여줄수있다.
-fixed와 같이 영향을 받는 노드가 전혀 없는 경우 리플로우 과정이 필요 없기 때문에 리페인트 연산 비용만 들일수 있다.
