Suddividi le attività lunghe

Funzionalità web: API Scheduler

Calcoli complessi o loop lunghi possono bloccare il thread principale, rendendo la pagina non reattiva. Per evitare che ciò accada, devi restituire periodicamente il controllo al browser. L'API scheduler.yield() ti consente di mettere in pausa un'attività lunga e di lasciare che il browser gestisca l'input dell'utente o il rendering prima di continuare.

Suddivisione delle attività lunghe

Utilizza scheduler.yield() all'interno delle funzioni asincrone per suddividere il lavoro.

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

Strategie di riserva

Alcuni browser potrebbero non supportare l'API scheduler. DEVI implementare un fallback utilizzando setTimeout per assicurarti che il codice venga eseguito senza interruzioni.

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