Reflow와 Repaint란?
웹 페이지가 화면에 표시되는 과정은 마치 정교한 연극 무대를 꾸미는 것과 같습니다. 이 과정에서 가장 중요한 배우들이 바로 Reflow와 Repaint입니다. 두 용어는 웹 성능의 핵심이며, 프론트엔드 개발자라면 반드시 이해해야 할 개념입니다.
Reflow: 무대 배치를 다시 그리다
Reflow는 브라우저가 웹 페이지의 레이아웃을 다시 계산하는 과정입니다. 마치 연극 감독이 무대 위 배우들의 위치를 다시 배치하는 것처럼, 브라우저는 DOM 요소들의 위치와 크기를 재계산합니다.
Reflow가 발생하는 대표적인 상황
// Reflow를 유발하는 코드 예시
element.style.width = '300px'; // 요소의 너비 변경
element.style.height = '200px'; // 요소의 높이 변경
document.body.appendChild(newElement); // 새 요소 추가
Repaint: 색칠하기
Repaint는 요소의 시각적 스타일만 변경되는 경우 발생합니다. 연극에서 배우의 위치는 그대로이고 의상만 바꾸는 것과 비슷합니다.
Repaint 예시
// Repaint를 유발하는 코드
element.style.backgroundColor = 'red'; // 배경색 변경
element.style.borderColor = 'blue'; // 테두리 색상 변경
성능 최적화 전략: Reflow와 Repaint 최소화하기
1. CSS 속성 사용 최적화
/* 비효율적인 방법 */
.element {
width: calc(100% - 50px);
height: calc(50vh - 100px);
}
/* 최적화된 방법 */
.element {
width: 100%;
max-width: calc(100% - 50px);
height: 50vh;
max-height: calc(50vh - 100px);
}
2. 애니메이션 최적화
/* 비용이 많이 드는 애니메이션 */
.animated-element {
left: 100px;
transition: left 0.3s;
}
/* GPU 가속을 활용한 최적화 */
.optimized-element {
transform: translateX(100px);
transition: transform 0.3s;
}
3. will-change 속성 활용
.optimized-animation {
will-change: transform, opacity;
transition: transform 0.3s;
}
주의할 점
- will-change는 과도하게 사용하면 오히려 성능에 악영향을 줄 수 있습니다.
- 가능한 한 레이아웃 변경을 최소화하세요.
- GPU 가속을 활용하는 transform과 opacity를 선호하세요.
실전 팁: 성능 개선을 위한 체크리스트
- CSS 속성 변경 시 최소한의 요소만 수정
- 애니메이션에 transform과 opacity 사용
- 불필요한 DOM 조작 최소화
- 레이아웃 계산을 유발하는 JavaScript 연산 최적화
결론
Reflow와 Repaint는 웹 성능의 핵심입니다. 이들을 이해하고 최적화하면 더 빠르고 부드러운 웹 애플리케이션을 만들 수 있습니다. 성능은 사용자 경험의 핵심이며, 작은 최적화들이 모여 큰 차이를 만들어냅니다.
참고: https://www.maeil-mail.kr/question/3
매일메일 - 기술 면접 질문 구독 서비스
기술 면접 질문을 매일매일 메일로 보내드릴게요!
www.maeil-mail.kr
728x90
'1일 1CS(Computer Science)' 카테고리의 다른 글
| 리액트의 Props와 State (0) | 2025.04.03 |
|---|---|
| 이벤트 루프에 대해서 설명해주세요. (0) | 2025.03.28 |
| TanStack Query: staleTime과 gcTime (0) | 2025.03.27 |
| 실행 컨텍스트란? (0) | 2025.03.26 |
| [★중요★]클로저 함수란? (0) | 2025.03.24 |