Programar tareas por prioridad

Funciones web: API de Scheduler

Cuando se compilan aplicaciones web complejas, las tareas tienen diferentes niveles de urgencia. Completar las tareas de la vista actual es más importante que enviar estadísticas o recuperar recursos previamente. La API de Prioritized Task Scheduling te permite programar tareas con prioridades específicas, lo que garantiza que el navegador siga respondiendo a las entradas del usuario.

Programar tareas por prioridad

Usa scheduler.postTask() para programar tareas con una de las tres prioridades:

  • user-blocking: Son tareas que bloquean la interacción del usuario (p.ej., control de entradas, renderización crítica).
  • user-visible: Son tareas visibles para el usuario, pero no bloqueantes (predeterminado).
  • background: Tareas que no son urgentes (p.ej., estadísticas, carga previa).
// 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' });

Estrategias de resguardo

Para admitir navegadores que no tienen la API de Prioritized Task Scheduling, debes usar un polyfill para mantener la priorización de tareas.

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