우선순위별 작업 예약

웹 기능: Scheduler API

복잡한 웹 애플리케이션을 빌드할 때는 작업의 긴급도가 다양합니다. 현재 뷰의 작업을 완료하는 것이 분석을 전송하거나 애셋을 미리 가져오는 것보다 더 중요합니다. 우선순위가 지정된 작업 예약 API를 사용하면 특정 우선순위로 작업을 예약하여 브라우저가 사용자 입력에 계속 응답하도록 할 수 있습니다.

우선순위에 따라 작업 예약

scheduler.postTask()를 사용하여 다음 세 가지 우선순위 중 하나로 작업을 예약합니다.

  • user-blocking: 사용자 상호작용을 차단하는 작업 (예: 입력 처리, 중요한 렌더링)
  • user-visible: 사용자에게 표시되지만 차단되지 않는 작업입니다 (기본값).
  • background: 시간에 민감하지 않은 작업 (예: 분석, 미리 가져오기)입니다.
// Schedule a high-priority task that blocks user interaction
scheduler.postTask(() => {
  // DO: Handle critical updates that impact user interaction
  handleCriticalUpdate();
}, { priority: 'user-blocking' });

// Schedule a default priority task
scheduler.postTask(() => {
  // DO: Render non-critical content that is visible to the user
  renderSecondaryContent();
}); // Defaults to 'user-visible'

// Schedule a low-priority background task
scheduler.postTask(() => {
  // DO: Perform heavy background work that is not time-critical
  sendAnalytics();
}, { priority: 'background' });

대체 전략

우선순위가 지정된 작업 예약 API가 없는 브라우저를 지원하려면 폴리필을 사용하여 작업 우선순위를 유지해야 합니다.

// Feature detect the scheduler API
if (!('scheduler' in window && 'postTask' in window.scheduler)) {
  // DO: Conditionally load the polyfill for browsers that need it
  const script = document.createElement('script');
  script.src = 'https://unpkg.com/scheduler-polyfill';
  script.onload = () => {
    // Polyfill is loaded and ready to use
    runScheduledTasks();
  };
  document.head.appendChild(script);
} else {
  runScheduledTasks();
}

function runScheduledTasks() {
  // Now safe to use scheduler.postTask in all browsers
  scheduler.postTask(() => {
    console.log('Task with priority support');
  }, { priority: 'background' });
}