AncomWiki

requestAnimationFrame 사용법

Properties1
descriptionJavaScript 애니메이션 루프에서 setInterval 대신 requestAnimationFrame(rAF) 을 사용하는 것이 더 효율적입니다. rAF 는 브라우저 최적화를 통해 더 부드러운 애니메이션을 제공하며, 비활성 탭에서 실행을 중단하여 CPU 사용량과 배터리 소모를 줄입니다. 사용법은 함수를 재귀적으로 호출하는 방식으로 구현하며, cancelAnimationFrame 을 통해 실행을 중지할 수 있습니다. 구형…

9 min read

requestAnimationFrame 사용법

Source

  • Evernote/Technote scraps/Using requestAnimationFrame.md

Summary

JavaScript 애니메이션 루프에서 setInterval 대신 requestAnimationFrame(rAF) 을 사용하는 것이 더 효율적입니다. rAF 는 브라우저 최적화를 통해 더 부드러운 애니메이션을 제공하며, 비활성 탭에서 실행을 중단하여 CPU 사용량과 배터리 소모를 줄입니다. 사용법은 함수를 재귀적으로 호출하는 방식으로 구현하며, cancelAnimationFrame 을 통해 실행을 중지할 수 있습니다. 구형 브라우저 지원을 위해 폴리필(Polyfill) 을 적용하면 모든 환경에서 사용 가능합니다.

Key Points

  • setInterval(1000/60) 보다 requestAnimationFrame 이 애니메이션 성능과 효율성에서 우수함
  • 장점: 브라우저 최적화(부드러운 렌더링), 비활성 탭 자동 정지(CPU/배터리 절약)
  • 구현: 함수 내부에서 requestAnimationFrame 을 재귀 호출하여 루프 생성
  • 제어: 반환된 ID 를 사용하여 cancelAnimationFrame 으로 실행 중지 가능
  • 호환성: IE9 이하 등 구형 브라우저는 폴리필 적용 필요

그래프 뷰

백링크