reflow와 repaint는 웹페이지가 렌더링 되는 과정에서 발생하는 작업들이다.
reflow는 브라우저가 페이지의 레이아웃을 다시 계산하는 과정을 말하며 DOM구조가 변경되거나 CSS스타일이 변경되면 브라우저는 각 요소가 화면에 어떻게 배치될지 다시 계산해야 한다.
이 과정은 모든 자식 요소와 관련된 부모 요소까지 영향을 주기 때문에 비용이 많이 드는 작업이다.
ex) CSS요소의 width와 height 속성을 변경하면, 브라우저는 해당 요소뿐만 아니라 연관된 모든 요소의 배치를 다시 계산해야 한다.
repaint는 요소의 모양이나 스타일이 변경될 때 발생한다.
요소의 레이아웃은 그대로이고, 색상이나 배경 등의 스타일만 변경되는 경우를 말하며 background-color 같은 속성을 예로 들 수 있다.
이 경우는 요소의 모양만 다시 그리면 되기 때문에 reflow보다 비용이 덜 들지만 여전히 성능에 영향을 줄 수 있다.
정리
reflow와 repaint는 둘 다 웹페이지의 렌더링이 완료된 후 화면이 변경될 때 발생하는 작업이지만 reflow는 화면의 구조가 변경될 때 DOM Tree를 다시 계산해야 하기 때문에 비용이 많이 드는 작업이고
repaint는 구조는 변하지 않고 화면에 요소 모양만 다시 그리면 되기 때문에 비용이 좀 덜하다.
반응형
