Perfomance Api in Javascript non funziona come previsto in Vue js
Quindi sto lavorando a un piccolo progetto in cui devo calcolare il tempo impiegato da ciascuna pagina per caricarsi e per ottenerlo sto facendo uso di Performance API e per essere precisi sto facendo uso di getEntriesByName () In Performance API come mostrato sotto.
performance.getEntriesByName(window.location.href)
Apri la console premendo F12 sulla tastiera ed esegui la riga sopra e guarda il risultato.
RISULTATO
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
....
Quindi mostrerà alcuni dati riguardanti la pagina. Come puoi vedere il valore di name è l'URL della pagina. Quindi eseguire la riga sopra su pagine diverse ci darà le metriche di quella pagina specifica.
PROBLEMA
Quindi il problema è che quando lo faccio su qualsiasi pagina in un progetto vue js fornisce solo le informazioni per la pagina principale. Diciamo che la mia pagina principale è / dashboard e quando eseguo quella riga di codice nella console sulla dashboard mi dà le metriche e funziona bene, ma diciamo che eseguo quella riga su / dashboard / users . Restituisce un array VUOTO .
NOTA
Qualcuno può indovinare perché ciò accade o qualcuno può dirmi un modo diverso con cui possiamo ottenere i valori di RISULTATO in qualsiasi altro modo. (senza utilizzare l'API delle prestazioni di JS), ad esempio come possiamo ottenere tutti questi dettagli senza l'uso dell'API delle prestazioni o in alcun modo per risolvere questa cosa
CONTROLLARE QUESTO
Sito web realizzato in vue js
Vai su questo sito web, cambia percorso e segui la procedura sopra, anche qui sta succedendo la stessa cosa. Perché sta accadendo in tutti i siti web di vue js.
Risposte
Il tipo di dati che stai cercando di ottenere tramite performance.getEntriesByName (window.location.href) dipende dal caricamento della pagina. I progetti Vuejs con Vue Router eseguiranno un solo caricamento iniziale della pagina. Nessun caricamento di pagina successivo avverrà al cambio di percorso. Ciò accadrà con qualsiasi applicazione a pagina singola.
Puoi vederlo nell'esempio dato andando su un percorso di tua scelta, ricaricando la pagina ed eseguendo di nuovo performance.getEntriesByName (window.location.href). Otterrai il set di dati desiderato invece di un array vuoto.
In generale, dovresti creare manualmente alcuni "segni" di prestazione nella tua app Vuejs e quindi potresti accedere alle voci che hai creato da quei segni.