Question
reflow와 repaint의 차이점에 대해서 설명해주세요.
Answer
- 프론트 엔드에서 렌더링에 관한 지식인 것 같으나, 잘 알지 못함.
Solution
-
reflow : 브라우저가 페이지의 레이아웃을 다시 계산하는 과정을 말합니다. DOM의 구조가 변경되거나 CSS 스타일이 변경되면, 브라우저는 각 요소가 화면에 어떻게 배치될지 다시 계산해야 합니다. 이 과정은 모든 자식 요소와 관련된 부모 요소까지 영향을 주기 때문에 비용이 많이 드는 작업입니다. 예를 들어, CSS에서 요소의 width나 height 속성을 변경하면, 브라우저는 해당 요소뿐만 아니라 연관된 모든 요소의 배치를 다시 계산해야 합니다.
-
repaint는 요소의 모양이나 스타일이 변경될 때 발생합니다. 요소의 레이아웃은 그대로이고, 색상이나 배경 등의 스타일만 변경되는 경우를 말합니다. background-color 같은 속성을 예로 들 수 있습니다. 이 경우 브라우저는 요소의 모양만 다시 그리면 되기 때문에 reflow보다는 비용이 덜 들지만, 여전히 성능에 영향을 줄 수 있습니다.
reflow는 레이아웃을 다시 계산하는 과정이고, repaint는 그 계산 결과를 화면에 다시 그리는 과정이라고 할 수 있습니다. 이 둘을 잘 이해하고 관리한다면 성능 최적화에 큰 도움이 됩니다.
기록