브라우저에서 요소의 크기, 위치, 색상 등을 변경하면 브라우저가 페이지를 다시 계산하고 렌더링하게 됩니다. 그 중 이 두 단계를 CSS 리플로우(reflow)와 리페인트(repaint)라고 합니다.
CSS 리플로우는 DOM 요소의 크기, 레이아웃 또는 위치가 변경되면 브라우저가 요소의 기하학적 속성을 다시 계산하고 페이지의 렌더링 트리를 다시 작성해야 함을 의미합니다. 리플로우로 인해 반드시 다시 그리기가 발생하지만 다시 그리기가 반드시 리플로우를 트리거하는 것은 아닙니다.
CSS 다시 그리기는 요소 스타일 변경이 레이아웃에 영향을 주지 않을 때 브라우저가 레이아웃을 다시 계산하지 않고 요소만 다시 그리면 된다는 의미입니다. 예를 들어, 요소의 색상을 변경하면 다시 그리기만 발생하고 리플로우가 발생하지 않습니다.
리플로우와 다시 그리기 모두 브라우저에서 페이지를 다시 계산하고 렌더링해야 하므로 성능 저하가 발생합니다. 따라서 코드를 작성할 때 잦은 리플로우와 다시 그리기를 피해야 합니다. 다음과 같은 최적화 조치를 취할 수 있습니다.
- DOM 스타일을 자주 수정하지 마세요.
- 변환을 사용하여 위쪽/왼쪽 및 리플로우를 유발하는 기타 작업을 대체하세요.
- 문서 조각(DocumentFragment)을 사용하여 DOM 작업을 수행하고 최종적으로 문서에 한 번에 추가합니다.
- CSS 표현식을 사용하면 브라우저가 매번 다시 계산하게 되므로 사용하지 마세요.
- 레이아웃 정보를 자주 읽거나 브라우저가 리플로우되도록 하는 오프셋 시리즈와 같은 속성을 사용하지 마세요.
요컨대, 코드를 올바르게 작성하고 리플로우 및 다시 그리기 작업을 줄이면 페이지 성능과 사용자 경험을 향상시킬 수 있습니다.