프론트엔드 면접, 성능 최적화 질문에 대한 완벽 답변!
by DD
5개월 전
조회수 8
아이폰 13에서 Spring 애니메이션 끊김 현상 발생, 브라우저 렌더링 구조 분석 시작
requestAnimationFrame 기반 Spring 물리 계산의 메인 쓰레드 병목 현상 발견, 해결책 모색
Svelte transition 방식 차용, Web Animation API 활용하여 애니메이션 끊김 문제 해결
브라우저 렌더링 파이프라인 이해
브라우저 렌더링은 JavaScript 실행, 스타일 계산, 레이아웃 계산, 페인트, 합성 단계를 거친다. 메인 쓰레드에서 JavaScript, DOM, 스타일 계산, 레이아웃을 처리하고, 컴포지터 쓰레드에서 합성 및 애니메이션을 담당한다. 따라서 transform과 opacity 변경은 성능에 유리하다.
Spring 애니메이션 최적화의 핵심
requestAnimationFrame 기반 Spring 애니메이션은 메인 쓰레드에서 매 프레임마다 실행되어 병목 현상을 유발한다. Web Animation API를 활용하여 애니메이션 경로를 미리 계산하고, keyframes를 생성하여 컴포지터 쓰레드에서 실행하도록 변경한다. 결과적으로 부드러운 애니메이션을 유지한다.
Svelte transition에서 배우는 교훈
Svelte의 transition 코드를 통해 keyframe을 미리 생성하는 방식을 학습했다. Spring 물리 계산의 결정론적 특성을 활용하여, 애니메이션 시작 전 전체 경로를 계산하고, Web Animation API를 통해 실행한다. 따라서 메인 쓰레드 부하 감소와 애니메이션 성능 향상을 동시에 달성한다.
