크롬 개발자 도구를 활용한 FPS 성능 확인

웹 페이지에서 애니메이션이나 인터랙션의 성능을 측정하고 싶을 때, 크롬 개발자 도구를 이용하면 FPS(Frame Per Second)를 확인할 수 있습니다.

아래 방법으로 FPS를 쉽게 확인하고 성능 병목 지점을 진단할 수 있습니다.

---

✅ FPS 확인 방법

1. 크롬 개발자 도구 열기
   • 원하는 웹 페이지에서 F12 또는 Ctrl/Cmd + Shift + I를 눌러 개발자 도구를 엽니다.
2. 명령 메뉴 실행
   • Ctrl/Cmd + Shift + P를 눌러 명령어 입력창을 열고,
     Show frames per second meter를 검색하여 실행합니다.
3. 좌측 상단에 FPS 표시창 확인
   • 이제 화면 좌측 상단에 FPS 측정 그래프가 표시됩니다.
4. FPS 표시 끄기
   • 다시 명령 메뉴를 열고 Hide frames per second meter를 실행하면 FPS 표시가 사라집니다.

 

📌 참고: FPS 기준

• 60 FPS가 브라우저에서 일반적으로 권장되는 기준입니다.
• FPS가 60보다 낮으면 애니메이션이나 UI 상호작용에서 버벅이거나 끊기는 느낌이 들 수 있습니다.

A lower than 60 FPS framerate may lead to a degraded user experience where animations and page updates are noticeably janky and interactions feel slow.

 

애니메이션 드로잉에 setInterval 대신 requestAnimationFrame 사용하여 성능 개선하기

• https://stackoverflow.com/questions/38709923/why-is-requestanimationframe-better-than-setinterval-or-settimeout

Why is requestAnimationFrame better than setInterval or setTimeout

• https://stackoverflow.com/questions/43379640/requestanimationframe-loop-not-correct-fps/43381828#43381828

requestAnimationFrame loop not correct FPS

⚙️ 애니메이션 성능 개선 팁

애니메이션을 구현할 때는 setInterval보다 requestAnimationFrame을 사용하는 것이 성능 면에서 더 유리합니다.

• requestAnimationFrame은 브라우저의 리플로우 타이밍에 맞춰 실행되므로 더 자연스러운 애니메이션을 구현할 수 있습니다.
• setInterval이나 setTimeout은 브라우저의 렌더링 주기와 맞지 않아 FPS 저하가 발생할 수 있습니다.