Uzun süren görevleri bölme

Web özellikleri: Scheduler API

Yoğun hesaplamalar veya uzun döngüler ana iş parçacığını engelleyerek sayfanın yanıt vermemesine neden olabilir. Bunu önlemek için kontrolü düzenli olarak tarayıcıya geri vermeniz gerekir. scheduler.yield() API'si, uzun süren bir görevi duraklatmanıza ve devam etmeden önce tarayıcının kullanıcı girişini veya oluşturmayı işlemesine olanak tanır.

Uzun süren görevleri bölme

İşleri bölmek için eşzamansız işlevlerde scheduler.yield() kullanın.

async function processLargeArray(items) {
  // DO: Set a time-based deadline 50 milliseconds into the future. 50
  // milliseconds is the boundary for when a task becomes a long task.
  let deadline = performance.now() + 50; // 50ms budget

  for (const item of items) {
    // Process the item
    processItem(item);
    
    // MANDATORY: Yield to the main thread periodically to keep the UI
    // responsive. This can be done by checking if the deadline set earlier
    // has been exceeded. When it has been, yield, then reset the deadline
    // another 50 milliseconds into the future.
    if (performance.now() >= deadline) {
      await scheduler.yield();
      deadline = performance.now() + 50;
    }
  }
}

Yedek stratejiler

Bazı tarayıcılar scheduler API'yi desteklemeyebilir. Kodun kesintiye uğramadan yürütülmesini sağlamak için setTimeout kullanarak bir yedek uygulamanız GEREKİR.

scheduler.yield() için yedek

async function processLargeArrayWithFallback(items) {
  // DO: Set a time-based deadline 50 milliseconds into the future.
  let deadline = performance.now() + 50;

  for (const item of items) {
    processItem(item);
    
    // MANDATORY: Yield to the main thread periodically to keep the UI responsive.
    if (performance.now() >= deadline) {
      // DO: Feature detect scheduler.yield
      if ('scheduler' in window && 'yield' in window.scheduler) {
        await scheduler.yield();
      } else {
        // DO: Fallback to setTimeout for older browsers
        await new Promise(resolve => setTimeout(resolve, 0));
      }
      deadline = performance.now() + 50;
    }
  }
}