프론트엔드 성능

정은경·2021년 5월 20일
0

👸 Front-End Queen

목록 보기
155/278

프론트엔드 성능

시간 ⏱

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

  • 네트워크 트래픽

profile
#의식의흐름 #순간순간 #생각의스냅샷

0개의 댓글