Web API, Scheduler

KB LEE·2025년 3월 13일

Web APIs

목록 보기

1/2

Scheduler API?

Scheduler API 는 웹 애플리케이션에서 Task의 우선순위를 지정하여 브라우저가 최적 시점에 실행할 수 있도록 하는 실험적(Experimental) API

즉, 개발자가 특정 Task를 high priority 작업인지, 아니면 low priority 작업인지 명시하여 브라우저가 렌더링과 사용자 인터랙션 등을 고려해 스케줄링을 보다 효율적으로 조정하도록 돕습니다.

⇒ setTimeout, requestIdleCallback보다 세밀하게 Task의 우선순위를 구분지을 수 있음

등장배경

이벤트 루프에선 Macrotask, Microtask, requestAnimationFrame, requestIdleCallback과 같은 API를 통해 Task를 관리

하지만 해당 방법들을 통해 Task를 관리하는 것은 우선순위를 명시적으로 전달하기 힘들다는 문제가 존재

이에 브라우저가 중요한 작업을 빨리 처리하거나 중요도가 낮은 작업은 뒤로 미룰 수 있도록 설계된 API를 제공

주요 개념 및 사용법

동작방식

개발자가 Task, 우선순위와 함께 scheduler.postTask를 호출
브라우저는 사용자 입력과 렌더링, 다른 태스크 등을 고려해, 가장 적절한 시점에 (가능하다면 빠르게) Task를 실행
만약 'user-blocking' 우선순위라면,
1. 브라우저는 해당 작업을 가능한 한 빨리(다른 보통 작업보다 우선) 실행하려 시도

⇒ 메인 스레드에서 수행되는 여러 작업이 스케줄링을 통해 더 효율적으로 실행될 수 있음

작업우선순위

user-blocking: 가장 높은 우선순위. 사용자 입력에 직접적인 영향을 주는 긴급 작업
- 마우스 이동, 키보드 입력 처리
user-visible: 중간 수준. 화면에 바로 보이는 콘텐츠에 필요한 작업 ( = 사용자에게 표시되지만 반드시 사용자 작업을 차단하지는 않는 작업 )
- 필수적이지 않은 이미지나 애니메이션과 같이 페이지의 필수적이지 않은 부분을 렌더링하는 것
background: 가장 낮은 우선순위. 긴 작업이지만 사용자 인터페이스에 즉시 영향을 주지 않는 경우
- 로깅, 써드파티 라이브러리 초기화

scheduler.postTask()

사용자가 작업을 실행하기 전 최소 지연 시간, 작업의 우선순위, 작업 우선순위를 수정하거나 작업을 중단하는 데 사용할 수 있는 신호를 선택적으로 지정

scheduler.postTask(() => {
  // 처리할 작업 로직
}, { priority: ... });

export function processChunksWithScheduler() {
  if (typeof window === 'undefined' || !('scheduler' in window)) return;

  let index = 0;
  async function processChunk() {
    const end = index + chunkSize;
    while (index < end) {
      heavyTask(largeArray[index]);
      index++;
    }
    if (index < largeArray.length) {
      await window.scheduler.postTask(processChunk);
    } else {
      console.log('processChunksWithScheduler done');
    }
  }
  processChunk();
}

scheduler.yield()

현재 실행중인 Task를 일시적으로 중단

현재 실행중인 Task를 일시중단함으로써 브라우저가 다른작업을 먼저 진행할 기회를 제공 ( = 해당 지점에서 이벤트 루프에 제어권을 넘겨주는 역할)

// 예시: 긴 루프 중간에 scheduler.yield()로 제어권 양보
while (remainingWork > 0) {
  doSomeWork();
  
  if (shouldPauseNow()) {
    // 브라우저에게 ‘다른 작업 우선 처리할 기회’를 준다
    await scheduler.yield(); 
  }
}

`yield()`와 `postTask()`의 차이점

구분	`scheduler.yield()`	`scheduler.postTask()`
작업 분할 방법	하나의 async 함수 안에서 중간마다 `await scheduler.yield()` 호출	각 청크 끝에 `scheduler.postTask`로 새 태스크를 등록 (재귀·반복 패턴)
동작 흐름	함수 흐름이 이어지다가 `yield` 지점에서 잠시 중단 브라우저가 더 중요한 태스크 처리 후 재개	chunk 실행 후 함수 종료 다음 청크는 Task로 예약되어 순차적으로 실행
가독성/스코프	- 단일 함수(loop) 내 로직이 linear - 재개 시점이 자연스럽게 이어짐 - 코드가 직관적	- 분할이 명시적 (청크 끝에서 postTask) - 재귀/반복 예약 구조이므로 flow가 분산될 수 있음 - 클로저 등으로 index 등 상태 관리
브라우저 지원	더 제한적(Chrome 일부 버전, 플래그) / 매우 실험적	Scheduler API 자체가 실험적이지만, `postTask`는 `yield`보다 상대적으로 먼저 도입
우선순위 지정	우선순위를 상속받고 직접 지정하지 못함	`scheduler.postTask(..., { priority })`로 태스크마다 다른 우선순위 지정 가능
유사 기존 기법	`await new Promise((r)=>setTimeout(r,0))` 방식과 비슷하나 우선순위적 혜택	`setTimeout(..., 0)` 또는 `requestIdleCallback`로 청크 분할하던 패턴과 유사
장/단점 요약	장점: 코드 흐름이 async/await로 명확 단점: 지원 더 적음, yield 시점 제어가 직접 필요	장점: 태스크 단위로 우선순위 세분 가능, 전통 청크분할과 유사 단점: flow가 재귀 예약되어 약간 복잡