Timer in Browser

Timer

  JS에는 일정 시간 후에 실행할 작업을 등록하는 몇가지의 메서드가 있다. 이들의 동작에 대해 정리해보자.

 

1. setTimeout & setImmediate

  setTimeout는 일정 시간 후에, setImmeiate는 일정 시간 간격으로 특정 작업을 반복하는 함수이다. 하지만, 실제로 작업이 동작한 시간을 살펴보면 실제 시간과는 약간의 차이가 있기도 하다. 그 이유는 무엇일까?

 

  첫 번째로 타이머 함수들은 일정 시간 후에 해당 작업을 실행시키는 것이 아니라 작업 큐에 넣는 것이기 때문이다. 작업이 실행되기 위해선 작업 큐에서 꺼내져야 하므로, 작업의 등록 시간과 실행 시간은 차이가 발생한다.

 

  두 번째로 타이머 스펙 때문이다. 타이머의 간격이 좁다는 것은 그만큼 CPU가 브라우저의 동작을 자주 살펴보아야하는 것이므로 베터리 성능에 영향을 준다. 따라서 HTML5, 운영체제(Window, Linux...)에서는 특히 타이머로 작업을 중첩하여 실행시킬 때 등록 가능한 시간의 최소값을 스펙으로 정의해두고 있다. 윈도우 운영체제의 경우 기본적으로 15.6ms 의 간격을 가지며, HTML5(브라우저)에서는 5개의 작업이 중첩되는 경우 작업의 실행간격이 최소 4ms가 되도록 지연시킨다.

 

  그런데, 브라우저라는 것은 운영체제 위에서 동작하는 프로그램인데 어떻게 작업을 운영체제의 타이머보다 더 빠른 간격으로 실행시킬 수 있을까? 사실 운영체제의 타이머는 0.5ms 까지 조정 가능하다. 따라서 브라우저는 운영체제의 타이머 간격을 조정하여 자신의 작업 간격을 15.6ms 보다 더 빠르게 조정하는 것이다. 그러나 타이머 간격은 배터리 성능에 영향을 주므로, 충전이 연결되어있지 않은 노트북과 같은 환경에서는 브라우저에서도 작업이 최소 15.6ms로 간격으로 지연되기도 한다.

 

  setTimeout과 setImmediate의 차이는 작업이 지연이 되더라도 실행이 되느냐 되지 않느냐의 차이이다. setImmediate의 경우 특정 시간 간격으로 작업을 실행시키기 위한 함수이므로 최대한 실행 간격을 맞추어 실행시키려고 한다. 그런데 작업 실행 시점에 다른 이벤트가 발생하는 등 실행 시점을 지키지 못하게된 경우에는 해당 작업을 아예 실행시키지 않는다. 반면, setTimeout은 지연이 되더라도 작업을 실행시킨다는 차이가 있다.

 

2. requestAnimationFrame

  반복되는 애니메이션과 같은 작업은 어떻게 구현하여야 할까? setTimeout과 setImmediate와 같은 함수로 구현할 수 있겠지만, 위 챕터에서 이들이 실행되는 시점은 등록한 시간과는 약간의 차이가 있을 수 있다는 점을 고려하면 적합하지 않을 수 있다. 이럴 때 고려할만한 함수는 바로 requestAnimationFrame() 이다.

 

  애니메이션은 어떻게 동작하는 것일까? 어렸을 적, 책의 각 페이지에 연속되는 그림을 그린 후 책을 빠르게 넘겨보면 그림이 움직이는 것처럼 보이는 경험을 한 적 있을 것이다. 브라우저의 애니메이션도 같은 원리이다. 짧은 시간 간격에 맞추어 그림을 생성하고 보여주는 작업의 연속이 애니메이션이다. 이 때 그림을 Frame이라 부른다.

 

  애니메이션에서 중요한 것은 Frame을 어떤 시점에 어떤 간격으로 보여주느냐이다. 브라우저에서는 애니메이션을 가장 부드럽게 보여주기 위해 운영체제의 VSync라는 정보를 사용하고 있다. VSync란, 모니터의 프레임이 변경되는 시점을 알려주는 신호로, 일반적으로 60ms의 간격을 갖는다.

 

  requestAnimation은 VSync의 타이밍에 맞추어 작업을 실행시킨다. 즉, requestAnimation란 사용자의 모니터 주사율에 맞추어 새로운 화면(frame)을 생성하고 보여주어 부드러운 애니메이션을 생성하기 위한 함수이다.