Décomposer les tâches longues

Fonctionnalités Web : API Scheduler

Les calculs lourds ou les boucles longues peuvent bloquer le thread principal, ce qui rend la page non réactive. Pour éviter cela, vous devez régulièrement rendre le contrôle au navigateur. L'API scheduler.yield() vous permet de mettre en pause une tâche longue et de laisser le navigateur gérer les entrées utilisateur ou l'affichage avant de continuer.

Décomposer les tâches longues

Utilisez scheduler.yield() dans les fonctions asynchrones pour diviser le travail.

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;
    }
  }
}

Stratégies de remplacement

Il est possible que certains navigateurs ne soient pas compatibles avec l'API scheduler. Vous DEVEZ implémenter une solution de remplacement à l'aide de setTimeout pour vous assurer que le code s'exécute sans interruption.

Création de remplacement pour scheduler.yield()

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;
    }
  }
}