requestIdleCallback 알아보기 (브라우저가 idle할 때, 콜백함수를 대기열에 👍)

✨ 주의) requestIdleCallback는 아직 실험적인 기능인 것 같다....

 

브라우저가 idle할 때 (메인 스레드가 사용자의 입력, 애니메이션 실행 등으로 한가 때) 콜백 함수를 실행할 수 있도록 해주는 함수가 requestIdleCallback 라고 한다.

 

브라우저가 여유가 있을 때, 콜백함수를 실행시켜서 여유 시간에 덜 중요한 작업을 효과적으로 처리할 수 있는 장점이 있다.

• 메인 스레드 과부하를 줄이며, 여러 작업을 동시에 처리하여 사용자의 경험을 향상시킬 수 있다.

var handle = window.requestIdleCallback(callback[, options])

 

mdn에서 소개하는 requestIdleCallback 함수는 이렇게 구성되는데, 아주아주 간단하게 실제로 실행할 수 있는 코드는 다음과 같다.

const taskId = window.requestIdleCallback((IdleDeadline) => {
    console.log("now browser is idle ~~", IdleDeadline);
}, { timeout: 2000 });

 

IdleDeadline은 didTimeout이라는 프로퍼티를 가지는 객체이다. 

didTimeout은 boolean 값을 가지고 말 그대로 타임아웃이 되었는지 판단할 수 있게 해준다.

 

옵션으로 들어가는 timeout 값은 처음 보면 해당 시간 뒤 실행? 이라는 뜻 같아 보이는데, 실은 해당 시간이 지났는데도 callback이 실행이 안된다면 성능에 부정적인 영향을 끼치더라도 해당 callback을 실행시킨다는 옵션이다.

 

window.cancelIdleCallback(taskId); // callback 실행 취소

 

requestIdleCallback는 반환 값으로 숫자를 반환하는데, 이 값을 통해서 callback 실행을 취소할 수 있다. (취소를 위해선 cancelIdleCallback를 사용하면 된다)

 

 

😌 이렇게 새로운 브라우저의 기능을 알아보았는데, 마지막으로 requestIdleCallback는 실제 어디에 사용되면 좋을지 생각해 보았다.

• 백그라운드 데이터 처리
  네트워크 요청 후 데이터를 렌더링할 필요가 없는 경우나, 사용자 인터페이스와 직접적으로 연관되지 않은 데이터를 처리할 때 사용하면 효율적일 수 있다. 
• 프리패치(prefetch) 및 사전 로드 작업
  리소스 프리패칭이나 이미지 사전 로딩과 같은 작업은 즉각적이지 않아도 되는 경우가 많으므로, requestIdleCallback을 통해 여유 시간을 활용할 수 있다.
• 애니메이션 최적화
  사용자 입력과 무관한 부드럽지 않은 애니메이션 최적화 작업에서도 사용할 수 있을 것 같다.
• 로그 수집 및 분석 작업
  페이지가 로드된 이후에 로그 데이터를 수집하거나 분석할 때, 이러한 작업은 사용자와 직접 연관되지 않기 때문에 requestIdleCallback를 통해 처리하면 좋을 듯 하다.

 

👻 다만, 비교적 최신 기능이기에 사용자들의 브라우저 버전을 확인하는 것이 좋을 것 같다.

크롬 기준으로는 2015년 12월 01일 릴리즈된 버전(47) 이후로 사용이 가능하다.

 

 

✨ 참고자료

https://developer.mozilla.org/ko/docs/Web/API/Window/requestIdleCallback

window.requestIdleCallback() - Web API | MDN

https://developer.mozilla.org/ko/docs/Web/API/Background_Tasks_API#example

Cooperative Scheduling of Background Tasks API - Web API | MDN

https://developer.mozilla.org/en-US/docs/Web/API/Window/cancelIdleCallback

Window: cancelIdleCallback() method - Web APIs | MDN