Interview
Reflow
- 웹 페이지 내에서 요소의 위치 또는 크기에 변화가 있을 때 변화된 레이아웃을 다시 계산하여 렌더 트리에 적용하는 과정이다.
- 크기(widnt, height…), 위치(position…), 레이아웃(flex, grid…), 폰트 관련 속성이 있다.
- 리플로우는 부모 노드의 변화가 자식 노드에게 영향을 끼쳐 성능상 부하가 발생하기 때문에 최소화해야 한다.
- 리플로우가 발생하면 일반적으로 리페인트도 같이 발생한다.
Repaint
- 웹 페이지 내에서 시각적인 표현에 변화가 있을 때 변화된 표현을 다시 계산하는 과정이다.
- 색상(color…), 테두리(border…) 관련 속성이 있다.
transform
- 직접적으로 크기나 위치 등을 변경할 시 레이아웃을 다시 계산하고 리플로우를 유발한다.
- transform은 원본의 위치를 기준으로 변환이 적용되기 떄문에 레이아웃 흐름을 유지하여 리플로우, 리페인트 발생을 최소화한다.
- 또한 실제 크기나 위치를 변경하지 않고, 여러 변환을 동시에 처리할 수 있으며, GPU를 사용하기 때문에 성능상 부하가 발생하지 않아 부드러운 애니메이션을 제공한다.