Identifier le code JavaScript lourd

Un code JavaScript lourd peut avoir un effet néfaste sur les performances de chargement des pages et l'interactivité. Les applications Web modernes dépendent plus que jamais de JavaScript, provenant de plusieurs sources. Il s'agit du code de l'application elle-même (et du code du framework sur lequel elle repose), ainsi que des scripts tiers qui ajoutent des fonctionnalités telles que des widgets de chat et des lecteurs vidéo. Les scripts d'analyse et de marketing en arrière-plan sont également des facteurs courants qu'il est trop facile d'oublier.

Identifier les causes principales d'une page Web qui ne répond pas peut s'avérer difficile, car cela nécessite une certaine expertise pour exécuter le traçage ou le profilage des performances Web et interpréter les résultats. De plus, les données réelles sont souvent très différentes des données de laboratoire, qui ne reproduisent qu'un petit sous-ensemble de scénarios utilisateur réels. Il peut donc être difficile d'identifier les causes profondes des mauvaises performances, en particulier pour les interactions.

L'API Long Animation Frames est une API légère qui permet d'identifier le code JavaScript lourd en production. Un script lourd peut être un script unique de longue durée ou un script qui s'exécute plusieurs fois au cours du cycle de vie de la page.

Mise en œuvre

Les frames d'animation longs sont surveillés à l'aide de l'interface PerformanceObserver. Elle émet une entrée long-animation-frame lorsqu'une image d'animation met plus de 50 ms à s'afficher. L'entrée contient des informations sur la frame d'animation longue, y compris sa durée et les scripts qui ont été exécutés pendant la frame.

L'entrée long-animation-frame contient une propriété scripts, qui est un tableau d'objets PerformanceScript. Chaque objet PerformanceScript contient des informations sur le script exécuté pendant la frame d'animation longue, y compris les valeurs sourceURL et duration du script.

Exemple d'identification des scripts les plus longs qui contribuent aux frames d'animation longs

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

Bonnes pratiques

• À FAIRE : Privilégiez l'API Long Animation Frames par rapport à d'autres alternatives comme l'API JS Self-Profiling, qui entraîne une surcharge d'exécution plus importante.
• À FAIRE : Résumez les informations clés, car l'API Long Animation Frames contient de nombreux détails.
• À FAIRE : Envoyez les informations requises à un service d'analyse en production.

Compatibilité des navigateurs et stratégies de remplacement

L'API Long Animation Frames est ignorée par les navigateurs qui ne la prennent pas en charge. Elle peut donc être utilisée en toute sécurité sans solution de remplacement. Dans la plupart des cas, les opportunités d'amélioration des performances qu'il identifie s'appliquent également aux autres navigateurs.