🤔 들어가며
데브코스 강사님께서 서버 요청 최적화에 대해 교육을 하고 있다가 requestIdleCallback이라는 것도 있다고 나중에 찾아보라고 하셨다.
requestIdleCallback를 처음 듣지만 브라우저가 바쁘지 않다면 실행해주는 함수라고 하셔서 성능 향상에 나중에 많이 도움이 될 것 같아서 공부를 해야겠다고 생각했고 매우 유용하게 사용될 것 같아 포스팅도 같이 하려고 한다.
😃 requestIdleCallback
requestIdleCallback는 브라우저의 유휴 시간을 활용하여 우선 순위가 낮은 작업을 실행하기 위한 API이다.
이 API는 브라우저가 사용자 상호작용, 렌더링, 기타 중요한 작업을 처리한 후에 스레드의 콜 스택이 비어있는 남은 시간을 활용하여 실행됩니다.
초기 페이지 렌더링 작업을 최대한 빨리 렌더링 하면서 렌더링 외 늦게 실행해도 되는 작업들은 뒤로 미루어 브라우저가 여유가 생겼을 때 실행하길 원하면 requestIdleCallback를 활용할 수 있다.
렌더링 후 남은 시간 : Idle
👌 사용 방법
const handle = window.requestIdleCallback(callback[, options]);requestIdleCallback 메서드는 window 전역 객체에 포함되어 있다.
Parameters
- callback
callback은 브라우저의 유휴 시간 동안 실행될 함수다. callback 함수는 IdleDeadline 객체를 인수로 받는다. IdleDeadline는 두 가지 속성을 제공한다.
timeRemaining(): 이 메서드는 현재 유휴 시간을 밀리초 단위로 반환한다. 즉 브라우저가 현재 얼마나 많은 유휴 시간을 가지고 있는지를 알려주는 것이다.
didTimeout: requestIdleCallback에 전달된 timeout 옵션이 지정되었을 때, 그 시간 내에 브라우저가 콜백 함수를 실행할 수 없었는지 여부를 나타낸다. 즉, 이 값이 true라면, 브라우저가 timeout 시간 내에 콜백을 실행하지 못했음을 의미하고, false라면 콜백이 timeout 시간 내에 실행되었음을 의미한다.
- options
options는 timeout 속성을 포함할 수 있는 객체다. timeout속성은 설정된 시간이 초과된 경우 idle 상태와 상관없이 그냥 실행해버린다.
예시
requestIdleCallback(myIdleCallback, { timeout: 2000 });
function myIdleCallback(deadline) {
if (deadline.timeRemaining() > 0 || deadline.didTimeout) {
// 브라우저가 Idle 상태일 때 실행되는 로직
}
}브라우저가 Idle 상태가 되면 myIdleCallback 콜백 함수가 호출된다.
호출 후 timeRemaining으로 브라우저의 남은 유휴 시간이 0초 보다 크거나 정해진 2초의 시간동안 브라우저의 유휴 시간이 부족하여 myIdleCallback가 실행할 수 없었다면 true를 반환하여 로직이 실행된다.
😢 마치며
requestIdleCallback에 대해 찾아봤지만 아직은 사용 경험이 없어서 그런지 효율성이나 사용법에 대해 완전?까지는 아직인 것 같다.
차후 프로젝트에서 최적화가 필요한 시점에 한 번 사용해볼 수 있다는 점이 그래도 매우 좋은 느낌인 것 같다.
알고 있는 것이랑 모르고 있는 것은 차이가 심하다. 그래도 알고 있다면 그것을 찾아보며 적용할 수 있지만 아예 모르고 있다면 그런 시도나 생각 조차 하기 힘드니깐.
