Javascript 中的性能 Api 在 Vue js 中无法按预期工作 [英] Perfomance Api In Javascript Not Working As Expected In Vue js

问题描述

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

So I am working on a small project in which I have to calculate the time taken by each page to load and to achieve that I am making use of Performance API and to be precise I am making use of getEntriesByName() In Performance API like shown below.

performance.getEntriesByName(window.location.href)

按键盘上的 F12 打开控制台并运行上面的行并查看结果.

Open the console by pressing F12 on your keyboard and run the above line and see the result.

结果

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.因此，在不同页面上运行上述行将为我们提供该特定页面的指标.

So it is going to show some data regarding the page. As you can see the value of name is the page url. So running the above line on different pages will give us metrics of that specific page.

问题

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

So the issue is that when i do that on any page in a vue js project it just gives the info for the main page. Let us say my main page is /dashboard and when I run that line of code in console on dashboard It gives me the metrics and runs fine but let us say I run that line on /dashboard/users. It returns an EMPTY array.

注意

任何人都可以猜出为什么会发生这种情况，或者任何人都可以告诉我我们可以通过任何其他方式获得 RESULT 值的不同方式.(不使用JS的性能api)，比如我们如何在不使用性能api或任何修复这个东西的情况下获得所有这些细节

Can anybody guess why that happens or can anybody tell me a different way by which we can get the RESULT values in any other way. (without using performance api of JS), like how can we get all these details without the use of performance api or any way to fix this thing

检查这个

vue js制作的网站

转到此网站并更改那里的路线并执行上述程序.这里也发生了同样的事情.为什么所有vue js网站都会出现这种情况.

Go to this website and change routes on there and do the above procedure.Same thing is happening here too. Why is it happening in all vue js websites.

推荐答案

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

The type of data you're trying to obtain via performance.getEntriesByName(window.location.href) is dependent on page load. Vuejs projects with Vue Router will do just one initial page load. No subsequent page loads will happen on route change. This will happen with any Single Page Application.

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

You can see this in your given example by going to a route of your choice, reloading the page and executing performance.getEntriesByName(window.location.href) again. You'll get your desired dataset instead of an empty array.

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

In general you would have to create some performance "marks" manually in your Vuejs app and then you could access the entries that you created from those marks.

这篇关于Javascript 中的性能 Api 在 Vue js 中无法按预期工作的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！