프론트엔드 성능

시간 ⏱

1. 초기 구동 시간

• 파일 다운로드
• 컨텐츠 렌더링
• 인터랙션 가능

2. 계산 시간

• 계산 시간 단축?을 위화여, 웹 워커, 느긋한 계산, 메모이제이션 등이 자주 사용됩니다.
• 자바스크립트는 싱글 스레드이다. 하지만 멀티 스레드가 가능하다

워커 스레드(worker thread)의 특징

• UI를 조작할 수 없다
• 워커 스레드 전용으로 분리된 파일이 필요하다
• postMessage()로 데이터를 전송하고, onmessage 이벤트를 통해 받는 방식으로 통신한다

Lazy Evaluation (느긋한 계산)
: 값이 필요해지기 전까지 계산을 미뤄두는 기법
느긋한 계산=게으른 평가=지연평가

Memoization
계산 결과를 기억해두고 반복사용하는 기법
루프, 재귀 호출 등 최적화

3. 반응 시간

지나치게 느린 애니메이션 및 응답 속도는 사용자 경험을 저해한다.

지나치게? 느린?의 기준을 무엇일까?

• 도허티 임계 (Doherty Threshold)
• 시스템의 응답이 400ms 보다 느리면 주의력 분산, 생산성 하락리 발생
• 사용자는 UI가 100ms 이하로 반응해야 자신이 UI를 다루고 있다고 느낀다
• 애니메이션은 60 FPS 기준으로 한다. (현존하는 모니터가 대부분 60Hz 기준으로 동작하기 때문에 가장 자연스럽다.)

리소스 💻

• CPU 점유율

  • 무한 루프만 아니면 괜츄니..!

• 전력 소비량

• 스토리지 용량

  • 가격이 많이 저렴해져서 괜츄니

• 메모리 사용량

• 메모리 누수 (Memory leak):

  • 이건 안괜츄니..!
  • 프로그램이 필요하지 않은 메모리를 계속 점유하는 현상
  • 자바스크립트는 자바스크립트 엔진이 메모리를 관리함
  • 자바스크립트는 C,C++언어와 달리 JS엔진이 "추정" 후 해제 (GC: Garbage Collection)
  • 이때, 참조 카운팅 방식 사용 (Reference Counting)

    메모리 생명 주기 (Memory Life Cycle)
    Allocation meory -> Use Memory -> Release Memory

• 네트워크 트래픽