RequestAnimationFrame
·
JavaScript
특정 함수를 반복해서 호출하는 경우 어떤 방법을 많이 사용할까? 다른 사람은 어떨지 모르겠지만 본인은 setInterval을 많이 사용해서 구현한다. 하지만 애니메이션을 구현할 때 setInterval을 사용한다면 성능을 저하하는 문제가 발생할 수 있다. 그때 대신 사용하는 것이 Request Animation Frame이다. 어떤 문제가 발생하는 것일까? 웹사이트의 화면은 여러 프레임으로 보여진다. 홈페이지를 스크롤 했을 때 16.7ms 마다 새로운 프레임이 생성되는 것을 볼 수 있다. 브라우저는 1초에 60프레임 지원하기 때문에 16.7ms 이 단순 계산으로도 맞다. 즉, 브라우저에 애니메이션이 매끄럽게 보여지기 위해서는 16.7ms 안에 1frame 화면에 그려져야 한다는 것이다. 그렇지 않으..