Aufgaben nach Priorität planen

Webfunktionen: Scheduler API

Beim Erstellen komplexer Webanwendungen haben Aufgaben unterschiedliche Dringlichkeitsstufen. Das Erledigen von Aufgaben für die aktuelle Ansicht ist wichtiger als das Senden von Analysen oder das Prefetching von Assets. Mit der Prioritized Task Scheduling API können Sie Aufgaben mit bestimmten Prioritäten planen, damit der Browser auf Nutzereingaben reagieren kann.

Aufgaben nach Priorität planen

Mit scheduler.postTask() können Sie Aufgaben mit einer von drei Prioritäten planen:

  • user-blocking: Aufgaben, die die Nutzerinteraktion blockieren (z.B. Eingabeverarbeitung, kritisches Rendering).
  • user-visible: Aufgaben, die für den Nutzer sichtbar sind, aber nicht blockieren (Standard).
  • background: Aufgaben, die nicht zeitkritisch sind (z.B. Analysen, Prefetching).
// 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' });

Fallback-Strategien

Damit Browser, die die Prioritized Task Scheduling API nicht unterstützen, die Aufgabenpriorisierung beibehalten, müssen Sie ein Polyfill verwenden.

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