클라이밍하는 개발자

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를 선호하세요.

실전 팁: 성능 개선을 위한 체크리스트

1. CSS 속성 변경 시 최소한의 요소만 수정
2. 애니메이션에 transform과 opacity 사용
3. 불필요한 DOM 조작 최소화
4. 레이아웃 계산을 유발하는 JavaScript 연산 최적화

결론

Reflow와 Repaint는 웹 성능의 핵심입니다. 이들을 이해하고 최적화하면 더 빠르고 부드러운 웹 애플리케이션을 만들 수 있습니다. 성능은 사용자 경험의 핵심이며, 작은 최적화들이 모여 큰 차이를 만들어냅니다.

참고: https://www.maeil-mail.kr/question/3