# 코드의 성능 향상

# 왜 성능을 신경써야 하나

Make it work, Make it right, Make it fast. - Kent Beck

프론트엔드 개발에서 성능 최적화는 다른 작업보다 우선 순위가 떨어짐. 하지만 성능 최적화를 하게 된다면 사용자 경험이 좋아지고, 비용을 아낄 수 있으며... 그냥 스스로 뿌듯해할 수 있다(중요)

일반적으로 성능은 시간과 리소스로 측정한다.

똑같은 리소스를 사용하면서도 얼마나 빠르게 동작하는지 = 성능
eg. CPU (혹은 램)를 똑같이 사용하는데 좀 더 빠르게 계산이 된다. = 성능이 좋다.

초기 구동 시간: 파일 다운로드, 컨텐츠 렌더링, 인터랙션 가능
- 파일 다운로드: 다운로드 할 파일 갯수가 한 도메인에 6개 이상이면 다운로드 지연됨. webp나 AVIF와 같은 이미지 포맷, woff 혹은 woff2 포맷의 폰트를 사용한다.
- 컨텐츠 렌더링: Lazy loading, placeholder 사용
계산 시간
- 웹 워커 사용: 로드가 큰 작업을 실행해야하는 경우에, 워커 스레드를 이용하여 멀티 스레드로 구현할 수 있음
- 메모이제이션
반응 시간
- 컴포지터 스레드 사용: 메인스레드를 사용하지 않고 컴포지터 스레드만 사용하는 opacity, rotate, scale, translate 를 이용해 애니메이션 구현하는 것이 성능에 좋음.
- 반응 시간의 기준은 애니메이션 60fps, 유저의 액션에 100ms 안에 UI가 반응.

메모리 누수 줄이기
- 할당~사용~해제에 이르는 매모리 라이프 사이클에서 가비지 컬렉팅 되지 않는 변수를 관리할 줄 알아야 함. Mark-and-sweep 알고리즘으로도 GC할 수 없는 가비지가 생길 수 있으니 주의할 것.
네트워크 트래픽 줄이기
- 최소화된 CSS, JS 파일 사용
- 프레임워크는 한 개 이하 사용