Réduire l’impact d’une extension sur le temps de chargement de la page

Article
10/15/2024

Les scripts de contenu sont des fichiers JavaScript que votre extension injecte dans des pages web et qui s’exécutent dans le contexte de ces pages web. À l’aide de scripts de contenu, votre extension peut accéder à une page web rendue et la modifier en lisant ou en modifiant le DOM.

Toutefois, les scripts de contenu peuvent avoir un impact notable sur les performances d’une page web, par exemple en ralentissant le temps de chargement de la page. Cela peut se produire si le script de contenu exécute beaucoup de code pendant le chargement de la page.

Cet article fournit les meilleures pratiques qui peuvent vous aider à réduire l’impact sur les performances de votre extension sur les pages web que vos utilisateurs visitent.

Profiler votre script de contenu d’extension

Pour profiler les performances du script de contenu de votre extension, utilisez Microsoft Edge DevTools ou l’outil de suivi Edge, comme décrit dans les sections suivantes.

Profiler votre script de contenu à l’aide de Microsoft Edge DevTools

DevTools fournit un ensemble de fonctionnalités permettant d’inspecter, de déboguer et de profiler le code utilisé par une page web. DevTools peut également être utilisé pour profiler le code de votre extension.

Dans cette section, vous allez apprendre à utiliser l’outil Performance dans DevTools pour profiler le script de contenu de votre extension. Pour en savoir plus sur l’outil Performance , consultez Présentation de l’outil Performance.

Pour ouvrir DevTools, cliquez avec le bouton droit sur la page web, puis sélectionnez Inspecter. Vous pouvez également appuyer sur Ctrl+Maj+I (Windows, Linux) ou Cmd+Option+I (macOS). DevTools s’ouvre.
Dans DevTools, dans la barre d’activité, sélectionnez l’onglet Performances (). Si cet onglet n’est pas visible, sélectionnez Autres outils () >Performances.
Pour commencer l’enregistrement d’un profil de performance, cliquez sur le bouton Enregistrer ().
Rechargez la page pour capturer les données de profilage qui correspondent au temps de chargement de la page, puis, une fois le chargement de la page terminé, cliquez sur le bouton Arrêter () pour terminer l’enregistrement. DevTools affiche le profil de performances enregistré :
Pour rechercher les événements de performances provoqués par votre script de contenu, appuyez sur Ctrl+F sur Windows/Linux ou sur Cmd+F sur macOS. La zone de texte Rechercher apparaît en bas de l’outil Performances .
Tapez Évaluer le script , puis appuyez sur Entrée jusqu’à ce que l’outil Performances met en surbrillance les événements de performances provoqués par votre script de contenu. Vous savez que vous avez trouvé l’événement de performances approprié lorsque l’étiquette Script dans le panneau Résumé affiche le nom de votre script de contenu :

Profiler votre script de contenu à l’aide de l’outil de suivi Edge

L’outil de suivi Edge, disponible à l’URL edge://tracing , est un outil puissant qui peut fournir une analyse détaillée des performances de votre extension. Dans cette section, vous allez apprendre à utiliser l’outil de suivi Edge pour comprendre l’impact de votre extension sur le temps de chargement de la page. Pour en savoir plus sur cet outil de suivi, qui est basé sur l’outil Perfetto , consultez Interface utilisateur Perfetto dans la documentation sur le traçage Perfetto.

Pour ouvrir l’outil de suivi Edge, ouvrez un nouvel onglet ou une nouvelle fenêtre, puis accédez à edge://tracing. L’interface utilisateur de suivi s’ouvre.
Pour démarrer une nouvelle trace, dans le coin supérieur gauche de l’outil, cliquez sur le bouton Enregistrer . La boîte de dialogue Enregistrer une nouvelle trace s’ouvre.
Sélectionnez l’option Sélectionner manuellement les paramètres . La liste des catégories s’affiche.
Pour capturer des informations détaillées sur la compilation et l’exécution du script de contenu de votre extension, sélectionnez toutes les catégories suivantes :
- Extensions
- v8
- devtools
- devtools. chronologie
Cliquez sur le bouton Enregistrer . La boîte de dialogue se ferme et l’outil de suivi Edge commence à enregistrer la trace.
Ouvrez un nouvel onglet et chargez une page web affectée par votre extension. L’outil de suivi collecte des données sur l’impact de votre extension sur les performances sur la page web.
Ouvrez l’onglet où s’exécute l’outil de suivi Edge, puis cliquez sur le bouton Arrêter . Les nouvelles informations de trace s’affichent dans l’outil.

Filtrer les résultats

Les traces enregistrées par l’outil de suivi Edge fournissent de nombreuses informations sur le navigateur, ainsi que sur votre extension.

Pour filtrer les informations afin d’afficher uniquement ce qui est pertinent pour la page web impactée par votre extension :

Dans la edge://tracing page, appuyez sur Maj+Échap pour ouvrir la boîte de dialogue Gestionnaire des tâches du navigateur .
Dans la boîte de dialogue Gestionnaire des tâches du navigateur , recherchez l’onglet correspondant à la page web affectée par votre extension, puis notez le numéro dans la colonne ID de processus . Fermez la boîte de dialogue.
Dans la barre d’outils de l’outil de suivi Edge, cliquez sur Processus, puis cochez la case correspondant à l’ID de processus que vous avez noté. Désactivez toutes les autres cases à cocher.
Dans le coin supérieur droit de l’outil de suivi Edge, cliquez sur le champ de recherche, tapez ScriptInjection ::InjectJS, puis appuyez sur Entrée à plusieurs reprises jusqu’à ce qu’un événement correspondant à votre extension soit mis en surbrillance dans le panneau inférieur.

Le panneau inférieur affiche l’heure de début et la durée totale de l’événement :

Rechercher les événements clés

Pour continuer à analyser l’impact sur les performances du script de contenu de votre extension sur la page web, recherchez les événements clés suivants dans l’événement ScriptInjection ::InjectJS :

v8.compile : affiche la durée de compilation de votre script de contenu.
v8.run : indique l’heure d’exécution du script compilé.

Ajouter uniquement le code de script de contenu nécessaire pour les fonctionnalités de votre extension

Le script de contenu de votre extension s’exécute dans le contexte de la page web. Pour réduire l’impact de votre script de contenu sur cette page web, veillez à ajouter uniquement, dans votre script de contenu, la quantité minimale de code que votre extension doit exécuter dans le contexte de la page web. Auditez le code dans votre script de contenu et supprimez les frameworks, outils, bibliothèques ou autres codes hérités dont votre script de contenu n’a pas besoin pour s’exécuter dans Microsoft Edge.

Vous pouvez utiliser des techniques de chargement différé et de fractionnement du code pour réduire la quantité de code qui s’exécute dans votre script de contenu :

Le chargement différé est le processus de chargement de votre code uniquement quand il est nécessaire, en fonction des actions de l’utilisateur, du contenu de la page ou de la logique d’extension.
Le fractionnement du code est le processus qui consiste à diviser votre code en blocs plus petits ou en modules, qui peuvent être chargés séparément ou à la demande.

Si votre extension est suffisamment petite, vous n’aurez pas besoin d’un outil de génération pour fractionner votre code. Si votre extension est plus grande et que votre code est plus complexe à gérer, utilisez un outil de génération pour fractionner votre code en blocs plus petits. Les outils de génération peuvent vous aider à organiser votre code en unités logiques, qui peuvent être chargées à la demande. Par exemple, vous pouvez utiliser webpack pour fractionner votre code en points d’entrée et en importations dynamiques :

Les points d’entrée sont chargés à chaque chargement de page.

Les importations dynamiques sont uniquement chargées à la demande, par exemple lorsque l’utilisateur interagit avec la page web ou avec l’interface utilisateur de l’extension :

// When the user clicks on the page.
document.addEventListener("click", async () => {
  // Dynamically load the code that's needed to handle the click event.
  const module = await import("chunk.js");
  // Do something with the newly loaded module code.
});

Charger uniquement votre script de contenu dans les pages et les cadres requis

Votre extension n’a peut-être pas besoin de s’exécuter sur chaque page web que l’utilisateur visite. Pour réduire la quantité de code qui s’exécute lorsque les pages web se chargent, configurez votre extension pour charger des scripts de contenu uniquement sur les pages et les cadres où ils sont nécessaires.

Pour configurer les pages et les cadres où vos scripts de contenu sont chargés, définissez des modèles d’URL dans votre fichier manifeste d’extension à l’aide de la matches propriété dans la content_scripts section . Pour plus d’informations, consultez Inject scripts in Content scripts dans la documentation extensions Chrome.

Vous pouvez également utiliser l’API d’extensions chrome.scripting pour injecter par programmation votre script de contenu dans la page web. Cette API vous permet d’injecter votre script de contenu en fonction des actions de l’utilisateur, du contenu de la page web ou de la logique d’extension. Pour plus d’informations, consultez chrome.scripting dans la documentation extensions Chrome.

Utilisez les meilleures pratiques suivantes lors de la configuration de l’emplacement de chargement de vos scripts de contenu :

Utilisez les modèles d’URL les plus spécifiques possibles pour les matches propriétés et exclude_matches dans votre fichier manifeste d’extension. Par exemple, si votre script de contenu doit uniquement s’exécuter sur les pages web du domaine example.com, utilisez https://example.com/* au lieu de «*://*/* .
Pour contrôler si votre script de contenu s’exécute uniquement dans le frame de niveau supérieur ou dans les cadres imbriqués de la page web qui correspond à un modèle d’URL, utilisez la all_frames propriété dans votre fichier manifeste d’extension. Par défaut, cette propriété est définie sur false, ce qui signifie que votre script de contenu s’exécute uniquement dans le frame de niveau supérieur. Si votre script de contenu doit accéder au DOM ou le modifier dans des cadres imbriqués, définissez cette propriété sur true. Notez que la définition de all_frames sur true augmente la quantité de code qui s’exécute sur une page web.

Charger des scripts de contenu uniquement en cas de besoin

Pour réduire la quantité de code qui est chargée et qui s’exécute sur chaque page web, et pour économiser la mémoire et les ressources processeur, chargez uniquement vos scripts de contenu si nécessaire, au lieu de chaque chargement de page.

Configurer quand charger des scripts de contenu dans votre fichier manifeste d’extension

Pour contrôler quand le script de contenu de votre extension doit être chargé, utilisez la propriété dans le run_at fichier manifeste de votre extension.

Par défaut, cette propriété est définie sur la document_idle valeur , ce qui signifie que le script de contenu est chargé et exécuté une fois que le chargement de la page est terminé et que le DOM est prêt. Il s’agit de la valeur recommandée pour la plupart des scripts de contenu. La document_idle valeur garantit que le script de contenu n’interfère pas avec le processus de chargement de page.

Pour charger et exécuter votre script de contenu avant que la page ne soit entièrement chargée, utilisez les document_start valeurs ou document_end . Ces valeurs sont utiles dans des cas tels que la modification de la mise en page web ou du style, mais elles peuvent également entraîner des problèmes de performances ou de compatibilité avec d’autres scripts de la page.

Charger par programmation des scripts de contenu au moment de l’exécution

Pour charger par programmation vos scripts de contenu au moment de l’exécution, utilisez l’API chrome.scripting uniquement si nécessaire. L’API chrome.scripting permet de mieux contrôler quand et où votre script de contenu est chargé.

Par exemple, vous pouvez utiliser l’API chrome.scripting pour charger votre script de contenu uniquement après que l’utilisateur a interagi avec la page web ou l’interface utilisateur de l’extension, par exemple lorsqu’il clique sur le bouton d’une extension ou qu’il clique sur une partie de la page web.

Si vous utilisez l’API chrome.scripting lorsque l’utilisateur interagit avec la page web, veillez à déterminer soigneusement si vous devez charger votre script de contenu à chaque fois que l’interaction se produit. Le chargement trop fréquent de scripts de contenu peut entraîner des problèmes ou des erreurs d’expérience utilisateur.

Éviter de bloquer les appels ou les tâches synchrones de longue durée

Le blocage des appels et des tâches synchrones de longue durée peut retarder le chargement de la page web ou ralentir d’autres aspects d’une page web, ainsi que nuire à la réactivité de l’interface utilisateur.

Les appels bloquants sont des opérations JavaScript qui empêchent l’exécution d’un autre code jusqu’à ce qu’ils se terminent. Par exemple, l’utilisation XMLHttpRequestdes API , localStorageou chrome.storage.sync (qui sont synchrones) empêche la page web d’exécuter un autre code.

Les tâches synchrones de longue durée sont des tâches synchrones qui prennent beaucoup de temps, empêchant le navigateur d’exécuter un autre code de page web pendant leur exécution. Cela peut inclure des calculs complexes, des boucles ou des manipulations de chaînes.

Utilisez du code asynchrone ou non bloquant, tel que l’API Fetch, les promesses JavaScript ou les workers web dans la mesure du possible. Le code asynchrone ou non bloquant permet l’exécution d’un autre code en attendant la fin d’une tâche, sans bloquer le processus de navigateur qui exécute la page web.

Notez que, bien que l’utilisation de Web Workers pour déplacer votre logique de code complexe vers un autre thread soit une bonne pratique, cela peut quand même ralentir les appareils qui ont un faible nombre de cœurs de processeur ou qui sont déjà occupés.

Voici un exemple d’utilisation de l’API Fetch. Pendant que les données sont extraites, le navigateur n’est pas bloqué et peut exécuter un autre code :

// Asynchronously load data from a JSON file.
fetch("data.json")
  .then(response => response.json())
  .then(data => {
    // Do something with the data.
  });

Stocker des données de manière asynchrone

Pour stocker des données dans votre extension, utilisez l’API chrome.storage.local au lieu de l’API localStorage , qui est une API synchrone. L’API chrome.storage.local est asynchrone et peut stocker et récupérer des données plus efficacement, sans affecter les performances de la page web sur laquelle votre extension s’exécute. Par exemple, vous pouvez utiliser la chrome.storage.local.get méthode pour récupérer une valeur précédemment stockée, puis utiliser le résultat dans une fonction de rappel :

chrome.storage.local.get("key", result => {
  // Do something with the result.
});

Envoyer des messages de manière asynchrone

Pour communiquer entre votre script de contenu et la page d’arrière-plan de votre extension, ou un autre script de contenu, utilisez les chrome.runtime.sendMessage méthodes ou chrome.tabs.sendMessage . Ces méthodes sont asynchrones et non bloquantes, et vous permettent d’envoyer et de recevoir des messages entre les différentes parties de votre extension. Vous pouvez utiliser des promesses ou des rappels pour gérer la réponse des messages. Par exemple, vous pouvez utiliser la chrome.runtime.sendMessage méthode pour envoyer un message à la page d’arrière-plan, puis utiliser l’objet retourné Promise pour traiter la réponse :

chrome.runtime.sendMessage({type: 'request', data: 'some data'})
  .then(response => {
    // Do something with the response.
  });

Exécuter des tâches intensives à partir du thread main

Utilisez web Workers pour exécuter des tâches intensives dans votre script de contenu sans bloquer le thread utilisé par le navigateur pour afficher la page web. À l’aide de Web Workers, le code qui exécute les tâches intensives s’exécute dans un thread distinct. Les web Workers peuvent améliorer les performances et la réactivité de votre script de contenu et des pages web sur laquelle il s’exécute.

Notez que la création d’un web Worker crée un thread, qui utilise de nouvelles ressources sur les appareils. L’utilisation d’un trop grand nombre de ressources sur des appareils bas de terminaison peut entraîner des problèmes de performances.

Pour communiquer entre votre script de contenu et web Worker, utilisez les postMessage API et onmessage . Par exemple, pour créer un travail web et lui envoyer un message, utilisez le code suivant :

// Create a new Web Worker.
cons worker = new Worker('worker.js');

// Send a message to the Web Worker.
worker.postMessage({type: 'task', data: 'some data'});

Pour recevoir des messages dans votre worker web et renvoyer des messages :

// Listen to messages that are sent to the Web Worker.
onmessage = event => {
  const type = event.data.type;
  const data = event.data.data;

  // Do something with the type and data.
  // ...

  // Send a message back.
  postMessage({type: 'result', data: 'some result'});
};

Voir aussi

Présentation de l’outil Performance

Documentation sur l’extension Chrome :

MDN :

Utilisation de Web Workers

Partage via