Menjadwalkan Tugas Berdasarkan Prioritas

Fitur web: Scheduler API

Saat membangun aplikasi web yang kompleks, tugas memiliki tingkat urgensi yang berbeda. Menyelesaikan tugas untuk tampilan saat ini lebih penting daripada mengirim analisis atau mengambil aset terlebih dahulu. Prioritized Task Scheduling API memungkinkan Anda menjadwalkan pekerjaan dengan prioritas tertentu, sehingga memastikan browser tetap responsif terhadap input pengguna.

Menjadwalkan tugas berdasarkan prioritas

Gunakan scheduler.postTask() untuk menjadwalkan tugas dengan salah satu dari tiga prioritas:

  • user-blocking: Tugas yang memblokir interaksi pengguna (misalnya, penanganan input, rendering penting).
  • user-visible: Tugas yang terlihat oleh pengguna, tetapi tidak memblokir (default).
  • background: Tugas yang tidak mendesak (misalnya, analisis, pengambilan data).
// 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' });

Strategi penggantian

Untuk mendukung browser yang tidak memiliki Prioritized Task Scheduling API, Anda harus menggunakan polyfill untuk mempertahankan prioritas tugas.

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