RequestAnimationFrame

2024. 10. 12. 12:06·JavaScript
반응형

특정 함수를 반복해서 호출하는 경우 어떤 방법을 많이 사용할까? 

다른 사람은 어떨지 모르겠지만 본인은 setInterval을 많이 사용해서 구현한다. 

 

하지만 애니메이션을 구현할 때 setInterval을 사용한다면 성능을 저하하는 문제가 발생할 수 있다. 

그때 대신 사용하는 것이 Request Animation Frame이다. 

 

어떤 문제가 발생하는 것일까? 

웹사이트의 화면은 여러 프레임으로 보여진다. 

홈페이지를 스크롤 했을 때 16.7ms 마다 새로운 프레임이 생성되는 것을 볼 수 있다. 브라우저는 1초에 60프레임 지원하기 때문에 16.7ms 이 단순 계산으로도 맞다. 

 

즉, 브라우저에 애니메이션이 매끄럽게 보여지기 위해서는 16.7ms 안에 1frame 화면에 그려져야 한다는 것이다. 

그렇지 않으면 애니메이션이 연결되는 것이 아니라 끊어지면서 보일 것이다. 

 

setInterval을 사용하면 이런 문제가 발생할 확률이 높아지는데, 실행 시점을 컨트롤할 수 없기 때문이다. 

반복을 하는 순간이 1프레임 안에 끝나지 않으면 또는 중간에 걸쳐지게 되는 경우가 발생할 수 있다. 

 

requestAnimationFrame은 frame을 렌더링할 준비가 됐을 때 callback을 실행시키기 때문에 frame 유실을 방지할 수 있다. 또 frame 생성 시점에 실행시키기 때문에 16.7ms 내에 렌더링을 완료할 확률이 더 높아진다. 

 

또한 페이지를 이동하는 경우 등, 비활성화 시 실행이 자동으로 중단되기 때문에 배터리 수명에도 효과적이다. 

let timeId;

function sample() {
  console.log("반복");

  timeId = requestAnimationFrame(sample);
}

sample();

사용하는 방법은 setInterval과 유사한데, requestAnimationFrame을 호출하면 id 값을 받을 수 있고 

종료하고 싶다면 cancelAnimationFrame을 사용해서 종료할 수 있다. 

 

 

반응형
저작자표시 비영리 변경금지 (새창열림)

'JavaScript' 카테고리의 다른 글

JavaScript Engine  (1) 2024.10.30
Scope Chain과 Closure, HOF  (2) 2024.10.16
Transition & Animation 이벤트  (3) 2024.10.09
스크롤 위치에 따른 오브젝트 조작  (1) 2024.09.29
얕은 복사 & 깊은 복사  (4) 2024.09.25
'JavaScript' 카테고리의 다른 글
  • JavaScript Engine
  • Scope Chain과 Closure, HOF
  • Transition & Animation 이벤트
  • 스크롤 위치에 따른 오브젝트 조작
잉여개발자
잉여개발자
풀스택 개발자를 목표로 잉여롭게 개발 공부도 하면서 다양한 취미 생활도 즐기고 있는 잉여 개발자입니다.
  • 잉여개발자
    잉여로운 개발일지
    잉여개발자
    • 분류 전체보기 (789)
      • 개발정보 (36)
      • 개발환경 (7)
      • 개발생활 (19)
      • React (141)
        • 이론 (23)
        • 기능 (12)
        • 실험실 (88)
        • 버그 (6)
        • 패스트캠퍼스 (9)
        • Npm (3)
      • React Native (28)
        • 공통 (6)
        • TypeScript (3)
        • JavaScript (18)
        • 버그 (1)
      • Next.js (30)
        • 이론 (13)
        • 실험실 (13)
        • 버그 (3)
      • Web (35)
      • 알고리즘 (202)
        • 풀이 힌트 (39)
      • JavaScript (47)
      • TypeScript (29)
        • 기초 (27)
        • 실험실 (2)
      • Node.js (13)
        • 이론 (0)
        • 기능 (3)
        • 실험실 (9)
        • 버그 (1)
      • 도커 (4)
      • CCNA (22)
        • 이론 (4)
        • 문제 (18)
      • 취미생활 (167)
        • 잉여로운 칵테일 (2)
        • 잉여의 식물키우기 (130)
        • 잉여로운 여행기 (11)
        • 잉여의 제2외국어 (21)
        • 잉여로운 책장 (2)
      • Java (1)
        • Java의 정석 (1)
      • 꿀팁 공유 (3)
  • 태그

    리액트
    영어회화
    리얼클래스
    바질 키우기
    식물
    네트워크
    네이버 부스트캠프
    CCNA
    react
    프로그래머스
    redux
    ChatGPT
    CSS
    typescript
    영어독학
    javascript
    next.js
    Node.js
    자바스크립트
    바질
    다이소
    리얼학습일기
    Babel
    Docker
    webpack
    알고리즘
    타입스크립트
    타일러영어
    ReactNative
    덤프
  • hELLO· Designed By정상우.v4.10.1
잉여개발자
RequestAnimationFrame

개인정보

  • 티스토리 홈
  • 포럼
  • 로그인
상단으로

티스토리툴바

단축키

내 블로그

내 블로그 - 관리자 홈 전환
Q
Q
새 글 쓰기
W
W

블로그 게시글

글 수정 (권한 있는 경우)
E
E
댓글 영역으로 이동
C
C

모든 영역

이 페이지의 URL 복사
S
S
맨 위로 이동
T
T
티스토리 홈 이동
H
H
단축키 안내
Shift + /
⇧ + /

* 단축키는 한글/영문 대소문자로 이용 가능하며, 티스토리 기본 도메인에서만 동작합니다.