출처: 매일메일
Reflow와 repaint는 웹 페이지가 렌더링되는 과정에서 중요한 역할을 하는 작업이다.
Reflow
Reflow는 브라우저가 페이지의 레이아웃을 다시 계산하는 과정이다. DOM 구조나 CSS 스타일이 변경되면 브라우저는 각 요소가 화면에 어떻게 배치될지를 다시 계산해야 한다. 이 과정은 모든 자식 요소와 관련된 부모 요소까지 영향을 미치기 때문에 비용이 많이 드는 작업이다. 예를 들어, CSS에서 요소의 width나 height 속성을 변경하면, 브라우저는 해당 요소뿐만 아니라 연관된 모든 요소의 배치를 다시 계산해야 한다.
Repaint
Repaint는 요소의 모양이나 스타일이 변경될 때 발생한다. 요소의 레이아웃은 그대로이고, 색상이나 배경 등의 스타일만 변경되는 경우를 말한다. 예를 들어, background-color 속성을 변경하는 경우가 이에 해당한다. 이 경우 브라우저는 요소의 모양만 다시 그리면 되기 때문에 reflow보다는 비용이 덜 들지만, 여전히 성능에 영향을 줄 수 있다.
성능 최적화 방법
Reflow와 repaint를 잘 관리하면 성능 최적화에 큰 도움이 된다. 다음은 이러한 과정을 최적화할 수 있는 몇 가지 방법이다.
-
Reflow를 유발하는 CSS 속성 사용 최소화: width, height, margin, padding, border 등의 속성은 reflow를 유발하므로 가능한 한 미리 CSS에서 스타일을 설정해 초기 로드 시에만 계산이 이루어지도록 하고 이후에는 변경하지 않는 것이 좋다.
-
CSS 애니메이션 최적화: transform과 opacity 속성만을 사용하는 것이 성능에 유리하다. 이 두 속성은 GPU 가속을 사용할 수 있어 reflow를 일으키지 않고 repaint만 발생시키므로 CPU 자원을 적게 사용한다.
-
Will-change 속성 사용: CSS의 will-change 속성을 사용하여 브라우저에 특정 요소가 변경될 것이라고 미리 알려줄 수 있다. 예를 들어, will-change: transform으로 미리 GPU에서 요소를 준비하게 하여 reflow 및 repaint에 미치는 영향을 줄일 수 있다. 하지만 will-change 속성은 너무 자주 사용하면 메모리 낭비가 발생하므로 필요한 요소에만 적용해야 한다.
-
DOM 조작 최소화: DOM 조작은 비용이 많이 드는 작업이다. 가능한 한 DOM 조작을 줄이고, DOM 변경 사항을 한 번에 처리하여 reflow와 repaint 횟수를 줄이는 것이 좋다.
-
인라인 스타일 사용 자제: 인라인 스타일은 HTML 파싱 시 레이아웃에 영향을 미쳐 추가적인 reflow를 발생시킬 수 있다. 따라서 인라인 스타일 대신 CSS 클래스를 사용하는 것이 바람직하다.
이러한 방법들을 통해 웹 페이지의 성능을 최적화할 수 있다. Reflow와 repaint를 이해하고 적절히 관리하는 것은 웹 개발에서 중요한 부분이다.
