성능 = 효율성

브라우저 플랫폼이 성능을 어떻게 개선하는지, 도구는 뭐가 있는지 찾아보자.

성능이란 ?

사용자가 체감하는 성능, 사용자 입력에 대한 시스템 출력의 품질.

사용자가 인지하는 하는 성능 개선이 가장 우선적이어야 한다.

필수 성능 지표

응답성

응답으로 얼마나 빨리 출력되는가.

지표: 화면 탭-픽셀 변경 사이 시간.

프레임 속도

시스템이 사용자에게 표시하는 픽셀 변경 속도

“서비스 품질” 지표로서 중요하다. 프레임 속도가 높을 수록 현실 모방성이 높아진다.

메모리 사용량

메모리 사용량=사용자 상태.

이상적인 시스템, 잘 설계된 시스템 = 가능한 많은 메모리를 사용자 상태를 유지하기 위해 사용하도록 최적화 함.

다만 리소스 낭비는 하지 않게 함.

전력 사용량

UPP 목표를 달성하기 위해 최소한의 전력을 사용하는 것

플랫폼 성능 최적화

웹 기술

그래픽 표시를 위해 HTML, CSS 등을 사용한다. HTML/CSS모두 제공하는 SVG도 있음.

그러나 HTML,CSS는 때로 프레임 속도, 렌더링에 대해 픽셀 수준의 제어를 희생하기도 해야 함.

텍스트, 이미지가 자동으로 reflow되거나 등.. 예상치도 못한 게 나올 수도 있다.

Canvas는 개발자가 직접 그릴 수 있는 픽셀 버퍼를 제공한다. 이로 개발자는 렌더링을 픽셀 단위로 제어하고 프로임 속도를 정밀하게 제어할 수 있음.

앱 성능

UPP가 중요.

시작 성능

사용자가 인지하는 앱 시작의 3가지 이벤트

1. 첫 paint

초기 프레임을 그리기에 충분한 앱 리소스가 로드된 시점

2. 앱이 대화형 상태가 되는 경우

버튼을 탭하면 응답하는 경우

3.전체로드

사용자의 모든 앨범이 음악 플레이어에 나열될 때.

웹 플랫폼은 동적이므로 리소스를 동적으로 로드할 수 있다. 따라서 불필요한 콘텐츠를 Lazy 느리게 로드하여 불필요한 작업을 지연시킬 수 있다.

또한 데이터베이스 로드와 같이 요청에 대해 응답을 기다리는 유휴 시간이 앱 시작 성능을 늦출 수 있음. 이 문제를 해결하려면 시작시 가능한 빨리 요청을 해야한다. (프론트 로딩) 그러면 나중에 필요할 때 기다릴 필요가 없다.

로컬에 캐시된 정적 리소스는 지연 시간이 길고, 대역폭이 낮은 모바일 네트워크로 가져오는 동적 데이터보다 빠르게 로드될 수 있다. 로컬 캐싱은 서비스워커로 할 수 있음.

프레임 속도

1. 정적인 콘텐츠는 HTML/CSS, 동적인 콘텐츠는 Canvas

  • HTML/CSS: 정적인 웹 페이지, 스크롤 위주 콘텐츠.
  • Canvas: 게임처럼 계속 바뀌는 화면에 적합.

2. CSS 애니메이션과 트랜지션을 사용하자

  • setTimeout()이나 top/left 위치 조정 방식은 성능이 떨어짐.
  • 대신 CSS 애니메이션과 transform을 사용하면 GPU 가속이 가능해서 훨씬 부드럽고 성능이 좋음.

3. CSS transform 쓰기

  • top, left 같은 위치 조정보다 transform: translate() 등을 쓰는 게 더 빠르고, GPU에서 처리할 수 있음.

4. requestAnimationFrame() 사용하기

  • setInterval()은 무조건 일정 시간마다 실행돼서 성능 낭비.
  • requestAnimationFrame()은 브라우저가 다음 프레임을 그릴 준비가 되었을 때만 실행돼서 효율적이고 배터리도 덜 먹음.

5. 애니메이션 성능을 높이는 팁

  • 작고 단순한 화면 전환만 하면 성능이 좋음.
  • 예: 화면 전체를 덮는 팝업, 설정 페이지 같은 걸 transform과 opacity로 전환하면 브라우저가 알아서 최적화함.

모바일 성능 이슈

모바일에서 몇 가지 작업이 더 느리게 처리될 수 있음

  • 네트워크 요청이 많을 수록
  • 큰 이미지, 그라디언트와 같은 복잡한 CSS효과
  • 파일 다운로드도 모바일 CPU가 느리기에 네트워크 속도를 다 못 쓸 수 있음.

개발자 도구로 원인을 못 찾을 때 (버그 신고 팁)

  1. 최소한 테스트 케이스 만들기: 불필요한 코드 제거하고 핵심만 남기기
  2. 정적 HTML 복사: 로컬에서 재현 후, 개인 정보 제거 후 다른 사람에 공유 (버그 리포트 용)
  3. MoZilla Bugzilla 등에 리포트 제풀하기. 재현 가능 코드+ 프로파일링 데이터와 함께하면 정확한 분석이 가능하다.