requestAnimationFrame

시각적 변화를 적용할 때 사용하는 API다.

화면에 시각적 변화를 줄 때 개발자는 브라우저한테 정확한 시간(프레임이 시작되는 시점)에 작업이 수행되길 바란다.
JS가 프레임 시작 시 실행되도록 보장하는 유일한(?) 방법이 바로 requestAnimationFrame을 사용하는 것이다.

/**
 * If run as a requestAnimationFrame callback, this
 * will be run at the start of the frame.
 */
function updateScreen(time) {
  // Make visual updates here.
}

requestAnimationFrame(updateScreen);

물론, setTimeout이나 setInterval을 사용하는 방법도 있다.
그러나 이 경우에 문제는 callback이 프레임의 특정 시점(종료 시)에서 실행이된다.
그래서 프레임 유실이나 버벅임이 발생할 수도 있다.

그럼 Main Thread에서 분리된 Web Workers는?

JS는 브라우저의 Main Thread에서 Style 계산, Layout 및 Paint 과정과 함께 실행된다.
JS가 장기간 실행이되면, 다른 작업을 차단하여 프레임을 누락시킬 위험이 있다.

그래서, DOM에 대한 접근이 필요하지 않을 경우에는 Web Workers로 작업을 이전할 수도 있다.
예를들어 정렬, 검색, 데이터 조작, 로드 그리고 모델 생성과 같은 작업들...

그러나, Web Workers의 경우는 DOM에 대한 접근 권한이 없다.
어쩔 수 없이 작업이 Main Thread에서 이루어져야 하는 경우에는 큰 작업을 세분화하는 수 밖에 없다.
몇 밀리초 이하의 micro task로 세분화하고, 각 프레임에서 requestAnimationFrame으로 실행하는 일괄 처리 방식을 사용한다.

Web Workers?

쉽게 말해, Background Thread에서 스크립트를 실행하는 방법이다.
Main Thread와 분리된 Thread를 실행시켜 User Interface를 방해하니 않고 작업을 수행할 수 있도록 한다.

이는 힘든 작업을 처리하는 것을 분리된 Thread에서 수행되도록하는 장점이 있어서 작업이 느려지거나 중단이 되어지는 경우가 없이 구동될 수 있도록 한다.

참고: 자바스크립트 실행 최적화