Memecah Tugas Berdurasi Lama

Fitur web: Scheduler API

Komputasi berat atau loop panjang dapat memblokir thread utama, sehingga menyebabkan halaman menjadi tidak responsif. Untuk mencegah hal ini, Anda harus mengembalikan kontrol ke browser secara berkala. scheduler.yield() API memungkinkan Anda menjeda tugas berdurasi lama dan mengizinkan browser menangani input pengguna atau rendering sebelum melanjutkan.

Memecah tugas berdurasi lama

Gunakan scheduler.yield() di dalam fungsi asinkron untuk membagi pekerjaan.

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

Strategi penggantian

Beberapa browser mungkin tidak mendukung scheduler API. Anda HARUS menerapkan penggantian menggunakan setTimeout untuk memastikan eksekusi kode tanpa error.

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