requestIdleCallback 사용법

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

RequestIdleCallback이란?

• 쉽게 말하면 브라우저가 idle 상태일 때 큐에서 콜백을 꺼내서 실행하는 API이다.

• 브라우저 idle 호출될 함수를 큐에 넣음 => 태스크큐에 있는 모든 작업을 처리 한 후 후순위로 콜백함수를 처리하는 방식.

• 분석, 백그라운드 데이터 처리 또는 페이지에서 덜 중요한 부분 렌더링과 같이 즉시 수행할 필요가 없는 필수적이지 않은 작업을 연기하는 데 특히 유용하다.

• 멀티스레드 방식을 사용하지 않고 백그라운드에서 실행되어야 하는 것들을 수행 할 때 도움이 될 것 같다.

사용법

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

• callback 함수는 IdleDeadline 객체를 인수로 받는다. IdleDeadline는 두 가지 속성이 있다.

• timeRemaining(): 이 메서드는 현재 유휴 시간을 밀리초 단위로 반환한다. 즉 브라우저가 현재 얼마나 많은 유휴 시간을 가지고 있는지를 알려주는 것이다.

• didTimeout: requestIdleCallback에 전달된 timeout 옵션이 지정되었을 때, 그 시간 내에 브라우저가 콜백 함수를 실행할 수 없었는지 여부를 나타낸다. 즉, 이 값이 true라면, 브라우저가 timeout 시간 내에 콜백을 실행하지 못했음을 의미하고, false라면 콜백이 timeout 시간 내에 실행되었음을 의미한다.

• 아래 로직에서, 브라우저의 유후시간이 있을때나 timeout 옵션이 지정시, 시간안에 실행이 못된다면, didTimeout 값이 true 가 되어
  callback funciton 이 실행되는 형태이다.

requestIdleCallback(myIdleCallback, { timeout: 2000 });

function myIdleCallback(deadline) {
  if (deadline.timeRemaining() > 0 || deadline.didTimeout) {
    // 브라우저가 Idle 상태일 때 실행되는 로직
  }
}

지원 브라우저?

• 아직은 실험적인 기능이다.

• Internet Explorer 및 일부 모바일 브라우저에서는 지원이 부족하다.