Performance Api en Javascript ne fonctionne pas comme prévu dans Vue js

Question

Je travaille donc sur un petit projet dans lequel je dois calculer le temps nécessaire à chaque page pour se charger et pour y parvenir, j'utilise l' API Performance et pour être précis, j'utilise getEntriesByName () Dans l'API Performance comme indiqué au dessous de.

performance.getEntriesByName(window.location.href)

Ouvrez la console en appuyant sur F12 sur votre clavier et exécutez la ligne ci-dessus et voyez le résultat.

RÉSULTAT

connectEnd: 1.55999994603917
connectStart: 1.55999994603917
decodedBodySize: 132839
domComplete: 1405.1149999722838
domContentLoadedEventEnd: 887.4099999666214
domContentLoadedEventStart: 867.9899999988265
name: "https://stackoverflow.com/questions/ask"
nextHopProtocol: "h2"
redirectCount: 0
....

Donc, il va montrer quelques données concernant la page. Comme vous pouvez le voir, la valeur du nom est l'URL de la page. Donc, exécuter la ligne ci-dessus sur différentes pages nous donnera des métriques de cette page spécifique.

PROBLÈME

Donc, le problème est que lorsque je fais cela sur n'importe quelle page d'un projet vue js, cela donne simplement les informations de la page principale. Disons que ma page principale est / dashboard et que lorsque j'exécute cette ligne de code dans la console sur le tableau de bord, cela me donne les métriques et fonctionne bien, mais disons que je lance cette ligne sur / dashboard / users . Il renvoie un tableau VIDE .

REMARQUE

Quelqu'un peut-il deviner pourquoi cela se produit ou est-ce que quelqu'un peut me dire une manière différente par laquelle nous pouvons obtenir les valeurs RESULT de toute autre manière. (sans utiliser l'API de performance de JS), comme comment pouvons-nous obtenir tous ces détails sans utiliser l'API de performance ou tout moyen de résoudre ce problème

VÉRIFIE ÇA

Site réalisé en vue js

Allez sur ce site Web et changez les itinéraires là-bas et suivez la procédure ci-dessus. Pourquoi cela se produit-il sur tous les sites Web vue js.

Answer 1

Le type de données que vous essayez d'obtenir via performance.getEntriesByName (window.location.href) dépend du chargement de la page. Les projets Vuejs avec Vue Router ne feront qu'un seul chargement de page initial. Aucun chargement de page ultérieur ne se produira lors du changement d'itinéraire. Cela se produira avec n'importe quelle application à page unique.

Vous pouvez le voir dans votre exemple donné en accédant à une route de votre choix, en rechargeant la page et en exécutant à nouveau performance.getEntriesByName (window.location.href). Vous obtiendrez l'ensemble de données souhaité au lieu d'un tableau vide.

En général, vous devrez créer manuellement des "marques" de performance dans votre application Vuejs, puis vous pourrez accéder aux entrées que vous avez créées à partir de ces marques.