리플로우와 리페인트

💬 리플로우와 리페인트

리플로우(Reflow)와 리페인트(Repaint)는 웹 브라우저의 렌더링 과정에서 중요한 개념이다.

이 두 용어는 웹 페이지의 레이아웃 및 시각적 표현을 관리하고 최적화하는 데 사용된다.

리플로우는 웹 페이지의 레이아웃이 변경될 때 발생하는 과정을 나타낸다. 이것은 요소의 크기, 위치, 구조 또는 스타일이 변경될 때 발생한다.
브라우저는 레이아웃 변경 사항을 계산하고, 이 변경 사항에 영향을 받는 요소 및 그 하위 요소들을 다시 배치한다. 이로 인해 레이아웃 트리(Layout Tree)와 렌더 트리(Render Tree)가 다시 생성된다.
리플로우는 비용이 많이 드는 연산이므로 자주 발생하면 성능에 영향을 미칠 수 있으므로 최소화해야 한다.

리페인트는 화면에 이미 그려진 요소의 일부분 또는 전체를 다시 그리는 과정을 나타낸다. 이것은 스타일, 배경색, 텍스트 내용 또는 다른 그래픽 요소의 변경 시에 발생한다.
리페인트는 리플로우보다 비용이 적게 들며, 레이아웃 변경이 없고 시각적인 변경만 있는 경우에 발생한다.
예를 들어, 요소의 색상을 변경하거나 가시성을 토글하는 경우 리페인트가 발생할 수 있다.

이러한 리플로우와 리페인트는 최소화 하여 사용해야 웹 페이지의 성능을 향상시키는데 중요하다. 따라서 다음과 같은 고려방법을 통해 이용하는 것이 권장된다.

리플로우와 리페인트는 웹 페이지의 렌더링 엔진이 요소를 다시 그리거나, 레이아웃을 변경할때 발생한다.

요소의 시각적 속성 변경: 요소의 색상, 배경, 경계선 등의 시각적 스타일 속성이 변경되면 리페인트가 발생한다.
투명도 변경: 요소의 투명도가 변경되면 리페인트가 필요할 수 있다.
텍스트 내용 변경: 텍스트 요소의 내용이 변경되면 해당 텍스트의 리페인트가 발생한다.
윈도우의 가리기 또는 나타내기: 윈도우 내에서 다른 창이 가려지거나 나타나는 경우, 그리고 윈도우의 최소화 또는 복원과 같은 창 상태 변경이 리페인트를 유발할 수 있다.

리플로우는 리페인트보다 더 큰 연산이므로 최소화하는 것이 중요하다. (layout 이 변경되기 때문)

따라서 웹 개발자는 CSS와 DOM 조작을 최적화하고, 레이아웃 변경을 줄이는 방법을 고려하여 웹 페이지의 성능을 향상시키려고 노력한다.