Planifier des tâches par priorité

Fonctionnalités Web : API Scheduler

Lorsque vous créez des applications Web complexes, les tâches ont différents niveaux d'urgence. L'exécution des tâches pour la vue actuelle est plus importante que l'envoi de données analytiques ou la prérécupération d'assets. L'API Prioritized Task Scheduling vous permet de planifier des tâches avec des priorités spécifiques, ce qui garantit que le navigateur reste réactif aux entrées utilisateur.

Planifier des tâches par priorité

Utilisez scheduler.postTask() pour planifier des tâches avec l'une des trois priorités suivantes :

  • user-blocking : tâches qui bloquent l'interaction de l'utilisateur (par exemple, la gestion des entrées, l'affichage critique).
  • user-visible : tâches visibles par l'utilisateur, mais non bloquantes (par défaut).
  • background : tâches qui ne sont pas urgentes (par exemple, analyses, préchargement).
// 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' });

Stratégies de remplacement

Pour prendre en charge les navigateurs qui ne disposent pas de l'API Prioritized Task Scheduling, vous devez utiliser un polyfill pour maintenir la priorisation des tâches.

// 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' });
}