RequestAnimationFrame

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

다른 사람은 어떨지 모르겠지만 본인은 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을 사용해서 종료할 수 있다.