requestIdleCallback의 deadline과 timeout을 구분하기
브라우저 유휴 시간에 낮은 우선순위 작업을 나누어 처리하고, timeout 실행에서도 작업량을 제한하는 방법을 설명합니다.
발행·오류 제보: infostoa · 편집 기준
이 글의 개별 작성자와 전문 검토자 정보는 제공되지 않습니다.
requestIdleCallback은 브라우저가 유휴하다고 판단할 때 콜백을 실행하도록 요청합니다. callback의 deadline.timeRemaining()은 남은 시간의 추정치를 돌려주며 작업을 선점 중단시키지 않습니다. W3C 초안은 콜백 예약과 deadline 인터페이스를 정의합니다. 유휴 시점은 브라우저가 정하므로 timeout은 사용자에게 진행 상황을 보이거나 반드시 끝내야 하는 작업의 완료 기한을 대신하지 않습니다.
추상적인 시간선 비유이며 실제 브라우저 일정, deadline 값 또는 API 실행 결과가 아닙니다.
유휴 작업에만 맡길 일
분석 데이터 전송 준비, 비핵심 캐시 계산처럼 사용자 입력이나 화면 표시를 늦춰서는 안 되는 일을 작은 단위로 처리할 때 고려할 수 있습니다. 애니메이션, 입력 반응, 반드시 완료해야 하는 저장 작업처럼 즉시성과 완료가 중요한 일에는 의존하지 마세요. 브라우저가 유휴 구간을 만들지 못하면 timeout을 지정하지 않은 요청은 오래 미뤄질 수 있습니다.
남은 시간은 예측치다
콜백에 전달된 deadline의 didTimeout은 timeout 경로로 호출됐는지를 나타냅니다. timeRemaining()은 현재 유휴 기회에서 쓸 수 있다고 추정되는 시간이며, 자바스크립트 실행을 중간에 끊는 제한 시간이 아닙니다. 반복문이 길거나 동기 함수가 무거우면 메인 스레드를 계속 막을 수 있습니다. 반복마다 남은 시간을 확인하고 작고 상한이 있는 작업 묶음만 수행하세요.
timeout도 완료 약속은 아니다
options.timeout은 유휴 콜백이 그 전에 실행되지 않았을 때 대체 실행 경로를 요청합니다. 실제 시작 시각은 브라우저 일정과 타이머 정밀도에 따라 늦어질 수 있습니다. timeout 경로에서 didTimeout이 true이고 timeRemaining()이 0일 수 있습니다. 이를 큐 전체를 처리해도 된다는 신호로 해석하지 말고 한 번의 작업량을 별도로 제한합니다.
취소와 호환성 고려
요청에서 반환한 식별자는 cancelIdleCallback에 전달해 아직 실행되지 않은 콜백을 취소할 때 사용합니다. 페이지가 숨겨지거나 작업이 더는 필요하지 않으면 취소와 상태 정리를 고려하세요. API 지원과 정책은 브라우저에 따라 확인해야 합니다. 시간에 민감하지 않은 배치에는 일반 작업 큐나 적절한 worker가 더 알맞을 수 있으므로, 유휴 콜백을 필수 로직의 유일한 진행 경로로 만들지 마세요.
큐를 작게 나누는 적용 예
예를 들어 화면 밖 목록을 점진적으로 검색 색인화한다면 한 번의 콜백에서 모든 항목을 훑기보다 다음 항목을 제한된 묶음으로 처리하고, 남은 시간이 충분할 때만 다음 묶음으로 넘어갑니다. didTimeout이 참이더라도 이번 차례에서 한 묶음만 처리한 뒤 다음 작업을 예약할 수 있습니다. 프레임 예산은 브라우저가 정하므로 데이터 크기만으로 작업 시간을 예측하지 말고 실제 동기 단계의 상한도 두세요.
작업이 사용자 입력으로 무효화되면 반환된 handle로 취소하고, 재예약 구조에서는 완료·실패 상태를 애플리케이션이 따로 관리해야 합니다. timeout은 콜백이 언제 시작되는지 보장하는 마감 시각이 아니며, 콜백이 여러 번 재예약된 전체 작업의 완료 기한도 아닙니다. 화면을 그리기 직전 반드시 끝나야 하는 계산이라면 유휴 큐가 아니라 별도의 명시적인 실행 경로를 설계해야 합니다.
콜백 사이의 진행 상태 관리
작업 위치와 완료·실패 상태는 콜백 함수 안의 임시 값에만 두지 말고 애플리케이션 상태로 관리하세요. 다음 콜백이 늦게 실행되거나 취소되어도 이어서 처리할지, 오래된 작업을 버릴지 판단할 수 있습니다.