[FE] 프론트엔드 서비스 최적화? 토스에서는 이렇게 합니다! - 정리

• 하면 좋을 것 같은데? 싶을 땐 하지마라!
• 해야 될 것 같으면 한 번만 더 생각해라!
• 이제 진짜 해야 된다 싶으면 프로파일링(측정)부터 시작하자.
• 그래도 토스에서 성능 최적화 시점이 좀 늦는 것 같기는 하다고 한다. by 토스 프론트 리드
• 개발자들은 늘 최적의 환경에서 테스트하기 때문에 실제로 불편함을 느끼는 사용자들을 발견하고 나서야 대처하게 된다.
• 세상 모든 것은 트레이드오프가 있다.
• ⇒ 최적화를 위해 시간을 줄였다면 어떤 것을 희생했다는 뜻

프론트 최적화의 2가지 측면

1. 초기 로딩 속도가 빠른 것
2. 런타임에서 반응성이 빠르고 좋음

초기 로딩 속도가 느린 이유

1. 대역폭
2. 지연 시간
3. 자바스크립트 실행 시간

1. 대역폭

대역폭 : 쌀가마니를 옮기는 트럭의 숫자

2. 지연시간

• 지연시간 : 쌀가마니를 옭기는 트럭의 속도
• 캐싱 활용
• 이동할 것 같은 페이지 프리페치
• 적절히 번들 쪼개기

런타임에서 반응성

• 최초 로딩보다는 로딩 이후 반응이 빠르고 좋아야함
• 어떻게 런타임 성능을 측정할 것인가
  • FPS
  • 상태 변화 시 얼마나 많은 렌더링이 일어나는가?
• 드래그앤드랍 시 60프레임을 유지하는가? 등의 기준을 세움
• 실제 동작 시간이 더 오래 걸리더라도 반응성이 좋으면 사용자는 성능이 좋다고 느낌 ⇒ 사용자를 속이기
• 메모를 사용해서 리렌더링을 최적화하더라도, 한 컴포넌트에 여전히 많은 컴포넌트가 포함되어 있으면 한 번의 렌더링에도 많은 연쇄적인 일이 발생한다.
• ⇒ 꼭 필요한 부분만 리렌더링되도록 함