Perfomance Api en Javascript no funciona como se esperaba en Vue js
Así que estoy trabajando en un pequeño proyecto en el que tengo que calcular el tiempo que tarda cada página en cargarse y para lograrlo estoy haciendo uso de Performance API y para ser precisos estoy haciendo uso de getEntriesByName () en Performance API como se muestra abajo.
performance.getEntriesByName(window.location.href)
Abra la consola presionando F12 en su teclado y ejecute la línea anterior y vea el resultado.
RESULTADO
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
....
Entonces va a mostrar algunos datos sobre la página. Como puede ver, el valor del nombre es la URL de la página. Entonces, ejecutar la línea anterior en diferentes páginas nos dará métricas de esa página específica.
PROBLEMA
Entonces, el problema es que cuando hago eso en cualquier página de un proyecto vue js , solo proporciona la información de la página principal. Digamos que mi página principal es / dashboard y cuando ejecuto esa línea de código en la consola en el tablero, me da las métricas y funciona bien, pero digamos que ejecuto esa línea en / dashboard / users . Devuelve una matriz VACÍA .
NOTA
¿Alguien puede adivinar por qué sucede eso o alguien puede decirme de una manera diferente mediante la cual podemos obtener los valores de RESULTADO de otra manera? (sin usar la API de rendimiento de JS), por ejemplo, ¿cómo podemos obtener todos estos detalles sin el uso de la API de rendimiento o cualquier forma de solucionar esto?
MIRA ESTO
Sitio web realizado en vue js
Vaya a este sitio web y cambie las rutas allí y realice el procedimiento anterior. Aquí también está sucediendo lo mismo. ¿Por qué está sucediendo en todos los sitios web de vue js?
Respuestas
El tipo de datos que intenta obtener a través de performance.getEntriesByName (window.location.href) depende de la carga de la página. Los proyectos de Vuejs con Vue Router realizarán solo una carga de página inicial. No se cargarán páginas posteriores en el cambio de ruta. Esto sucederá con cualquier aplicación de página única.
Puede ver esto en su ejemplo dado yendo a una ruta de su elección, recargando la página y ejecutando performance.getEntriesByName (window.location.href) nuevamente. Obtendrá su conjunto de datos deseado en lugar de una matriz vacía.
En general, tendría que crear algunas "marcas" de rendimiento manualmente en su aplicación Vuejs y luego podría acceder a las entradas que creó a partir de esas marcas.