처음 프론트엔드를 공부할 땐

transition
transform
animation

같은 걸 그냥 “예쁘게 만드는 CSS” 정도로 생각했다.

근데 프로젝트 규모가 커지고, 애니메이션이 많아지고, 스크롤 인터랙션이 붙기 시작하니까
이상한 순간들이 보였다.

스크롤이 끊김
hover에서 버벅임
modal 열 때 프레임 드랍
모바일에서 특히 느려짐

처음엔 React 렌더링 문제인 줄 알았다.

근데 DevTools를 열어보니 생각보다 훨씬 아래 레벨 문제가 있었다.

바로 브라우저 렌더링 과정이었다.

브라우저는 생각보다 엄청 많은 일을 한다

처음엔

HTML + CSS
→ 화면 출력

정도로만 생각했다.

근데 실제 브라우저 내부에선 꽤 복잡한 과정이 일어난다.

HTML 파싱
→ DOM 생성

CSS 파싱
→ CSSOM 생성

Render Tree 생성

Layout (Reflow)

Paint (Repaint)

Composite

특히 중요한 건 뒤 3개였다.

여기서 성능 차이가 대부분 발생한다.

Reflow (Layout)

요소의 크기와 위치를 다시 계산하는 작업 이다.

예를 들어

el.style.width = '200px';

를 변경하면 브라우저는 단순히 width만 바꾸는 게 아니다.

생각보다 훨씬 많은 걸 다시 계산한다.

왜 Reflow가 비쌀까?

브라우저는 레이아웃이 연결되어 있기 때문이다.

예를 들어

A 요소 width 증가
↓
B 위치 변경
↓
부모 height 변경
↓
스크롤 영역 변경

처럼 연쇄적으로 영향을 줄 수 있다.

즉 하나의 변경이

전체 레이아웃 재계산

까지 이어질 수 있다.

그래서 Reflow는 CPU 비용이 크다.

“CSS 하나 바꾼 건데?”

특히 처음 성능 문제를 디버깅할 때 놀랐던 게 이거였다.

el.style.top = '100px';

이런 코드 하나는 생각보다 무겁다

왜냐면

top
left
width
height
margin
padding
font-size

같은 속성들은 전부 Layout 계산을 다시 유발하기 때문이다.

즉 단순 스타일 변경이 아니라

브라우저 전체 배치 계산

에 가까운 작업이었다.

Repaint는 생각보다 덜 무겁다

Repaint는 Layout은 유지한 채
다시 픽셀만 그리는 단계다.

예를 들어

background
color
box-shadow

같은 속성 변경.

이 경우 위치 계산은 안 한다.

그래서 Reflow보단 가볍다.

Paint도 공짜는 아니다

처음엔

"Layout만 안 건드리면 괜찮겠네?"

라고 생각했다.

근데 box-shadow가 엄청 많은 카드 UI를 만들었을 때
스크롤이 끊기는 걸 경험했다.

특히 blur 큰 shadow.

box-shadow: 0 20px 80px rgba(...)

이런 건 Paint 비용이 꽤 크다. Paint도 결국 픽셀을 다시 그리는 작업이다.

그래서 요소 수가 많거나,
효과가 복잡하면 충분히 느려질 수 있다.

Composite 단계가 진짜 핵심이었다

성능 최적화를 공부하면서 가장 많이 보게 된 문장

transform, opacity만 사용하세요

처음엔 거의 주문처럼 느껴졌다.

근데 Composite 단계를 이해하고 나서 이유가 보였다.

Composite는 GPU가 처리한다

Composite 단계는 이미 만들어진 레이어를
합치는 작업이다.

즉

Layout X
Paint X

상태에서

"이미 그려진 걸 이동/합성"

만 수행한다.

대표적인 속성이

transform
opacity

다.

그래서 애니메이션 성능이 훨씬 좋다.

왜 transform이 top보다 빠를까?

이걸 이해한 순간 애니메이션 보는 눈이 완전히 바뀌었다.

나쁜 예

top: 100px;
left: 100px;

이건 Layout 변경이다.

즉 Reflow 발생.

좋은 예

transform: translate(100px, 100px);

이건 위치를 “시각적으로 이동”만 한다.

즉 Composite 단계에서 처리 가능하다.

그래서 훨씬 부드럽다.

will-change를 처음 봤을 땐 만능 옵션인가?

will-change: transform;

브라우저에게

"곧 transform 바뀔 거니까 준비해둬"

라고 힌트를 주는 속성이다.

처음엔

"오 성능 좋아지네?"

싶었다.

근데 조금 더 공부하니까 무서운 점이 보였다.

will-change는 GPU 메모리를 미리 사용한다

브라우저는 will-change가 선언된 요소를 미리 레이어로 분리할 수 있다.

즉 GPU 메모리를 점유한다.

문제는

will-change 남발

하면 오히려 성능이 악화될 수 있다는 점이다.

특히 모바일에서 심하다.

GPU 메모리는 무한하지 않다.

그래서 지금은

"정말 애니메이션 직전에만 잠깐 사용"

하는 게 맞다고 생각한다.

예전처럼

.card {
  will-change: transform;
}

를 앱 전체에 깔아두는 건 꽤 위험하다.

내 생각

개발자도구 > more tools > rendering > paint flashing 체크하면

reflow, repaint가 얼마나 일어나는지 시각적으로 확인할수있다

확인해보는것도 도움이 될것같다.

내 기준

Reflow
→ 진짜 필요한 경우만

Repaint
→ 적당히 허용 가능

Composite
→ 애니메이션 기본 전략

Reflow, Repaint