La clé de l'analyse des performances frontales est de localiser les goulots d'étranglement et d'utiliser des outils de développeur de navigateur pour afficher les mesures de base. Tout d'abord, utilisez le panneau de performance pour analyser le temps d'exécution de FP, FCP, LCP, CLS et JS; Deuxièmement, optimisez l'ordre de chargement des ressources via le panneau réseau, compressez des images, fusionnez CSS / JS et définissez des têtes de cache; Deuxièmement, surveiller l'interaction des utilisateurs et les taches longues, déplacer des calculs complexes vers le travailleur du Web, ainsi que la limitation et l'anti-sillage pour les événements à haute fréquence; Enfin, introduisez le SDK de surveillance des performances pour les rapports automatisés et optimisez continuellement l'expérience.

L'analyse des performances frontales n'est en fait pas difficile, mais beaucoup de gens ont tendance à ignorer les points clés au début. Autrement dit, il s'agit de découvrir les causes profondes de problèmes tels que le chargement lent des pages et le décalage d'interaction via des outils et des méthodes. L'accent est mis sur le positionnement des goulots d'étranglement, et non à l'optimisation aveuglément.

Utilisez des outils de développeur de navigateur pour afficher les mesures de base

Chrome Devtools est l'outil d'analyse des performances frontaux le plus couramment utilisé, et le panneau de performances peut vous aider à voir l'intégralité du processus de chargement de la page. La fa?on d'ouvrir est très simple: cliquez avec le bouton droit sur la page et sélectionnez "Vérifier" → Passez à l'onglet Performance → Cliquez sur le bouton d'enregistrement dans le coin supérieur gauche, et après avoir rafra?chi la page, vous pouvez voir l'enregistrement détaillé.

Concentrez-vous sur plusieurs indicateurs:

• FP (première peinture) et FCP (première peinture contente) : temps où la page rend le contenu pour la première fois
• LCP (la plus grande peinture contente) : temps de dessin de contenu maximum, affectant la perception de l'expérience utilisateur
• CLS (décalage de disposition cumulatif) : décalage de mise en page de la page, affectant la stabilité visuelle
• Temps d'exécution de JS : le fil principal est occupé par JS trop longtemps, ce qui fera bégayer la page.

Vous pouvez également voir le diagramme de cascade de chargement de ressources dans le panneau. Le script ou l'image ralentit le chargement global est clair en un coup d'?il.

Analyser les demandes du réseau et optimiser l'ordre de chargement

Les panneaux de réseau sont une autre entrée importante. Il peut montrer l'ordre de temps, de taille et de chargement de chaque demande. Vous pouvez trouver des fichiers de grande taille, des demandes répétées ou bloquer les ressources de rendu.

Les questions fréquemment posées comprennent:

• L'image n'est pas compressée, elle est des centaines de kb ou même plus
• Plusieurs fichiers JS ne sont pas fusionnés, ce qui entra?ne plusieurs demandes
• Ne pas utiliser CDN ou la politique de cache est déraisonnable
• Rendu les ressources de blocage (comme Synchronous <script></script> )

Pratiques suggérées:

• Ajouter srcset et loading="lazy" à l'image
• Fusionner CSS / JS et utiliser le chargement asynchrone des ressources non critiques
• Configuration de l'en-tête de cache HTTP approprié
• Réduisez la taille du fichier de police avec les sous-ensembles de police

Surveiller l'interaction des utilisateurs et les taches longues

La question de savoir si le fonctionnement de l'utilisateur est fluide dépend en grande partie de l'efficacité d'exécution de JavaScript. Vous pouvez utiliser le graphique de flamme du thread principal dans le panneau de performance pour afficher la pile d'appels de fonction et le temps d'exécution.

Si vous constatez qu'une fonction est exécutée pendant plus de 50 ms, elle peut entra?ner un retard d'interaction. Vous pouvez considérer cela pour le moment:

• Mettez des calculs complexes dans le travailleur Web pour exécuter
• Accélération ou anti-taille pour les événements à haute fréquence (comme le défilement, l'entrée)
• Retard Chargement des modules fonctionnels non essentiels

Vous pouvez également utiliser console.time() et console.timeEnd() pour marquer manuellement le temps d'exécution d'un morceau de code pour un débogage facile.

Données de performance de surveillance et de rapport automatisées

Il ne suffit pas de terminer l'analyse de l'environnement de développement, et l'expérience des vrais utilisateurs en ligne est plus importante. Un SDK de surveillance des performances légers peut être introduit pour collecter automatiquement les indicateurs FP, FCP, FID et CLS et se présenter au serveur.

L'implémentation consiste généralement à insérer un petit morceau de script JS en bas de la page pour écouter les données performance.timing et PerformanceObserver . Vous pouvez également utiliser des solutions prêtes à l'emploi, telles que la bibliothèque Web Vitals de Google.

Il convient de noter que vous ne comptez pas trop pour éviter d'affecter les performances de l'utilisateur lui-même.

Fondamentalement, tout cela est. L'analyse des performances frontales n'est pas un travail unique, mais un processus d'optimisation continue. Les outils ne sont pas compliqués, la clé est de voir plus, d'essayer plus et de comparer plus.

Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!