Javascript 中的性能 API 在 Vue js 中无法按预期工作答案

【问题标题】：Perfomance Api In Javascript Not Working As Expected In Vue jsJavascript 中的性能 API 在 Vue js 中无法按预期工作
【发布时间】：2020-09-05 22:20:45
【问题描述】：

所以我正在做一个小项目，在这个项目中我必须计算每个页面加载所需的时间并实现我正在使用 Performance API 并且准确地说我正在使用 getEntriesByName() 在如下所示的性能 API。

performance.getEntriesByName(window.location.href)

按键盘上的F12打开控制台，运行上面的代码，看看结果。

结果

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
....

因此它将显示有关页面的一些数据。如您所见，name 的值是页面 url。因此，在不同页面上运行上述行将为我们提供该特定页面的指标。

问题

所以问题是，当我在 vue js 项目 的任何页面上执行此操作时，它只会提供主页的信息。假设我的主页是 /dashboard，当我在仪表板的控制台中运行该行代码时，它为我提供了指标并且运行良好，但假设我在 /dashboard 上运行该行/用户。它返回一个 EMPTY 数组。

注意

谁能猜出为什么会发生这种情况，或者谁能告诉我一种不同的方式，我们可以通过任何其他方式获得 RESULT 值。（不使用 JS 的性能 api），比如我们如何在不使用性能 api 或任何方法来解决这个问题的情况下获得所有这些细节

检查一下

Website made in vue js

去这个网站并在那里改变路线并执行上述程序。同样的事情也发生在这里。为什么所有vue js网站都会出现这种情况。

【问题讨论】：

标签： javascript vue.js

【解决方案1】：

您尝试通过 performance.getEntriesByName(window.location.href) 获取的数据类型取决于页面加载。带有 Vue Router 的 Vuejs 项目只会做一个初始页面加载。路由更改时不会发生后续页面加载。这将发生在任何单页应用程序中。

您可以在给定的示例中看到这一点，方法是转到您选择的路线，重新加载页面并再次执行 performance.getEntriesByName(window.location.href)。您将获得所需的数据集，而不是空数组。

通常，您必须在 Vuejs 应用程序中手动创建一些性能“标记”，然后您可以访问从这些标记创建的条目。

【讨论】：

举个例子会有所帮助。