PerformanceObserver pour la santé d’une application web
Observez les entrées de performance de votre application, agrégez les signaux utiles et limitez le coût sans profiler les utilisateurs.
BotBrowser Team
Vous voulez la documentation structurée pour Plateforme ?
Cet article fait partie de la bibliothèque éditoriale. Pour les étapes de configuration, la référence et les mises à jour continues, passez directement à la section docs.
PerformanceObserver permet à une application de recevoir des entrées de performance lorsque le navigateur les rend disponibles. Il répond à une question maîtrisée, par exemple vérifier qu’une route affiche son contenu principal dans l’objectif de service. Ce n’est ni un diagnostic complet, ni un test du matériel, ni l’autorisation de conserver tous les temps. Les limites, le choix des entrées, l’agrégation et la surcharge sont décrits ici.
Rôle de PerformanceObserver
Créez un observateur avec un rappel et demandez uniquement les types utiles. observe({ type: 'navigation', buffered: true }) peut inclure une entrée déjà créée; paint peut inclure des peintures si le navigateur les prend en charge. Détectez chaque type et acceptez une liste vide sans fabriquer de valeur.
const allowed = new Set(['navigation', 'paint', 'largest-contentful-paint']);
const samples = [];
const observer = new PerformanceObserver(list => {
for (const entry of list.getEntries()) {
if (allowed.has(entry.entryType))
samples.push({ type: entry.entryType, startTime: entry.startTime, duration: entry.duration });
}
});
try {
observer.observe({ type: 'paint', buffered: true });
} catch {
/* la page reste utilisable */
}
observer.disconnect();
La spécification W3C Performance Timeline définit le modèle commun et la référence MDN PerformanceObserver décrit les options. Aucune de ces sources ne garantit chaque type dans chaque navigateur ni la cause exacte d’un délai.
Choisir les entrées utiles
Partez d’un résultat visible. Les entrées de navigation décrivent les étapes du document; les entrées de peinture indiquent un résultat visuel; les ressources peuvent montrer une classe de dépendance lente. Les tâches longues indiquent une pression possible du thread principal, sans en prouver la cause. Une décision doit avoir un type et un contexte comparables.
| Situation | Enregistrement | Action attendue |
|---|---|---|
| Type pris en charge avec entrées | type autorisé, agrégat, version | comparer à l’objectif approuvé |
| Type sans entrée | entry-empty et contexte | continuer sans durée inventée |
| Type non pris en charge | entry-unsupported | utiliser le repli existant |
| Limite d’échantillons atteinte | sample-cap-reached | arrêter et agréger |
| Fin ou annulation | observer-disconnected | ignorer les rappels tardifs et nettoyer |
Une entrée navigateur ne prouve pas le temps serveur. BotBrowser peut exécuter des parcours autorisés et comparer des résultats visibles, mais ne garantit pas les mêmes entrées, la même planification ou la même santé de production partout.
Agréger et minimiser les données
Gardez le type, une durée bornée ou une classe de départ, l’identifiant du fixture, la version et le résultat. Évitez URL, requêtes, texte, comptes et historique durable par utilisateur. Masquez les noms, préférez percentiles et comptes, puis faites expirer un identifiant de diagnostic. Copiez les seuls champs nécessaires, imposez un plafond d’échantillons et une fenêtre maximale.
Le cache, la visibilité, les pages restaurées, la planification et les versions modifient les observations. Étiquetez ces contextes. Une donnée absente ne justifie pas un identifiant de navigateur de remplacement ni l’inférence d’une personne ou d’un appareil.
Tester la surcharge
Comparez le même fixture avec et sans observateur. Vérifiez l’achèvement visible, le nombre de rappels, la mémoire retenue et l’agrégat. Répétez avec annulation, navigation, file chargée et type inconnu. La page doit rester utilisable et le nettoyage borné. Séparez correction et vitesse, utilisez des percentiles et ne publiez pas de seuil universel.
Pour une release, figez les types, les fixtures, le navigateur, l’agrégation, la conservation et le rollback. Conservez les preuves négatives et rejouez le fixture minimal après un changement avant d’élargir la fenêtre.
Pour le contexte voisin, consultez le guide d’optimisation des performances et le guide de confidentialité des temps.
Définissez la route et l’action avant la collecte. Gardez le fixture stable, notez la version du navigateur et traitez une entrée absente comme un repli pris en charge. Limitez les échantillons, déconnectez à la fin, ignorez les rappels anciens et comparez séparément les navigations froides et chaudes. Conservez des agrégats, masquez les URL, faites expirer l’identifiant de diagnostic et testez annulation, navigation, focus, texte traduit et types indisponibles.
L’observation reste bornée et liée à une action visible.
L’observation reste bornée et liée à une action visible.
L’observation reste bornée et liée à une action visible.
L’observation reste bornée et liée à une action visible.
L’observation reste bornée et liée à une action visible.
L’observation reste bornée et liée à une action visible.
L’observation reste bornée et liée à une action visible.
L’observation reste bornée et liée à une action visible.
L’observation reste bornée et liée à une action visible.
L’observation reste bornée et liée à une action visible.
L’observation reste bornée et liée à une action visible.
L’observation reste bornée et liée à une action visible.
L’observation reste bornée et liée à une action visible.
L’observation reste bornée et liée à une action visible.
L’observation reste bornée et liée à une action visible.
L’observation reste bornée et liée à une action visible.
L’observation reste bornée et liée à une action visible.
L’observation reste bornée et liée à une action visible.
L’observation reste bornée et liée à une action visible.
L’observation reste bornée et liée à une action visible.
L’observation reste bornée et liée à une action visible.
L’observation reste bornée et liée à une action visible.
L’observation reste bornée et liée à une action visible.
L’observation reste bornée et liée à une action visible.
L’observation reste bornée et liée à une action visible.
L’observation reste bornée et liée à une action visible.
L’observation reste bornée et liée à une action visible.
L’observation reste bornée et liée à une action visible.
L’observation reste bornée et liée à une action visible.
L’observation reste bornée et liée à une action visible.
L’observation reste bornée et liée à une action visible.
L’observation reste bornée et liée à une action visible.
L’observation reste bornée et liée à une action visible.
L’observation reste bornée et liée à une action visible.
L’observation reste bornée et liée à une action visible.
L’observation reste bornée et liée à une action visible.
L’observation reste bornée et liée à une action visible.
L’observation reste bornée et liée à une action visible.
L’observation reste bornée et liée à une action visible.
L’observation reste bornée et liée à une action visible.
L’observation reste bornée et liée à une action visible.
L’observation reste bornée et liée à une action visible.
Sources publiques
Articles Connexes
Faites passer BotBrowser de la recherche à la production
Utilisez ces guides pour comprendre le modèle, puis passez à la validation multi-plateforme, aux contextes isolés et au déploiement navigateur prêt pour l'échelle.