Identifica il codice JavaScript con esecuzione pesante

Un JavaScript con un'esecuzione pesante può avere un effetto negativo sia sulle prestazioni di caricamento della pagina sia sull'interattività. Le applicazioni web moderne fanno più affidamento che mai su JavaScript, proveniente da più fonti. Questi includono il codice dell'applicazione stesso (e il codice del framework su cui si basa), nonché script di terze parti che aggiungono funzionalità come widget di chat e video player. Anche gli script di analisi e marketing dietro le quinte sono fattori comuni che è troppo facile dimenticare.

Identificare le cause principali di una pagina web che non risponde può essere difficile, in quanto sono necessarie determinate competenze per eseguire il tracciamento o la profilazione delle prestazioni web e per interpretare i risultati. Inoltre, i dati reali sono spesso molto diversi da quelli di laboratorio, che replicano solo un piccolo sottoinsieme di scenari utente reali. Ciò può rendere difficile identificare le cause principali di un rendimento scadente, soprattutto per le interazioni.

L'API Long Animation Frames è un'API leggera che può essere utilizzata per identificare il codice JavaScript con un'esecuzione pesante sul campo. Uno script con un'esecuzione intensa può essere un singolo script con un'esecuzione prolungata o uno script che viene eseguito più volte durante il ciclo di vita della pagina.

Come implementare

I frame dell'animazione lunghi vengono monitorati utilizzando l'interfaccia PerformanceObserver. Genera una voce long-animation-frame quando il rendering di un frame di animazione richiede più di 50 ms. La voce contiene informazioni sul frame dell'animazione lungo, tra cui la durata del frame e gli script eseguiti durante il frame.

La voce long-animation-frame contiene una proprietà scripts, che è un array di oggetti PerformanceScript. Ogni oggetto PerformanceScript contiene informazioni sullo script eseguito durante il frame dell'animazione lungo, inclusi sourceURL e duration dello script.

Esempio di identificazione degli script in esecuzione da più tempo che contribuiscono ai frame dell'animazione lunghi

// Accumulate all script entries across the page lifecycle so no
// data is lost between observer callbacks.
const allScripts = [];

const observer = new PerformanceObserver(list => {
  // Collect all script entries across frames to find the biggest offenders.
  allScripts.push(...list.getEntries().flatMap(entry => entry.scripts));

  // Group by sourceURL so you can identify which scripts contribute
  // the most total time, even if each individual invocation is short.
  const scriptSource = [...new Set(allScripts.map(script => script.sourceURL))];
  const scriptsBySource = scriptSource.map(sourceURL => ([sourceURL,
      allScripts.filter(script => script.sourceURL === sourceURL)
  ]));
  const processedScripts = scriptsBySource.map(([sourceURL, scripts]) => ({
    sourceURL,
    count: scripts.length,
    totalDuration: scripts.reduce((subtotal, script) => subtotal + script.duration, 0)
  }));

  // Only include scripts above a certain threshold to reduce noise.
  const heavyScripts = processedScripts.filter(script => {
    return script.totalDuration > 100;
  });

  // Sort by total duration so the worst offenders appear first,
  // making it easier to prioritize optimization efforts.
  heavyScripts.sort((a, b) => b.totalDuration - a.totalDuration);

  // Log to the console for local debugging. In production, replace
  // this with a call to send the data to your analytics service.
  console.table(heavyScripts);
});

// Use buffered: true to capture any long frames that occurred before
// this observer was registered.
observer.observe({type: 'long-animation-frame', buffered: true});

Best practice

• SÌ: preferisci l'API frame dell'animazione lungo ad alternative come l'API JS Self-Profiling, che comporta un overhead di tempo di esecuzione più elevato.
• SÌ: riassumi le informazioni chiave, poiché l'API Long Animation Frames contiene molti dettagli.
• SÌ: invia le informazioni richieste a un servizio di analisi in produzione.

Supporto del browser e strategie di riserva

L'API Long Animation Frames viene ignorata dai browser che non la supportano, quindi può essere utilizzata in sicurezza senza fallback. Nella maggior parte dei casi, le opportunità di miglioramento del rendimento identificate si applicano anche ad altri browser.