핵심 요약 (불릿)
- Reflow: 레이아웃 재계산 필요
- Repaint: 시각적 요소만 다시 그리기
- Reflow가 더 비용이 크며 최소화해야 함
- 스타일 변경·DOM 접근 방식이 성능에 영향
실제 면접 답변 예시 (문장형)
“Reflow는 요소의 크기나 배치가 변할 때 브라우저가 레이아웃을 다시 계산하는 과정이고, Repaint는 위치 변화 없이 색상이나 배경처럼 시각적 표현만 다시 그리는 과정입니다. 일반적으로 Reflow가 훨씬 비용이 크기 때문에, DOM 조작을 batching 하거나 class 단위 변경, transform·opacity 활용 등으로 레이아웃 변화를 최소화해 성능 최적화를 할 수 있습니다.”
실무 팁 & 주의점
- DOM을 조작할 때는 읽기/쓰기 작업이 번갈아 일어나지 않도록 묶어서 처리하세요.
- 애니메이션은 가능하면 transform과 opacity로 처리해 레이아웃 계산을 피하세요.
- CSS 변경 시 개별 속성보다 class 토글 방식이 더 안정적으로 성능을 관리합니다.
'Coding Study > 면접질문' 카테고리의 다른 글
| 쿠키(Cookie)와 Web Storage(LocalStorage, SessionStorage)의 차이점은 무엇이며, 각각 언제 사용하는 것이 적절한가요? (0) | 2025.12.09 |
|---|---|
| React에서 key 속성은 왜 필요하며, 잘못 사용하면 어떤 문제가 발생할 수 있나요? (0) | 2025.12.09 |
| CSS 우선순위(CSS Specificity)는 어떻게 결정되며, 스타일 충돌 상황에서 이를 어떻게 해결할 수 있나요? (0) | 2025.11.27 |
| Web Components는 무엇이며, 프론트엔드에서 이를 활용할 때 어떤 장점이 있나요? (0) | 2025.11.26 |
| JavaScript 이벤트 루프(Event Loop)는 어떻게 동작하며, 프론트엔드 애플리케이션에서 왜 중요한가요? (0) | 2025.11.26 |