javascript - NavigationTimingAPI 可以用于异步调用吗？

Question

我目前正在我们的项目中实现性能测量功能，它使用自定义元素 v1。

NavigationTimingAPI提供了对不同导航类型（导航、重新加载、浏览器后退/前进）的非常详细的测量：

是否也可以为异步调用提供相同的（或类似的详细信息）？或者是否还有其他我不知道的 API？

也就是说，当页面完全加载并且某些用户交互或事件触发服务器定位资源上的 POST 或 GET 时。

到目前为止，我发现的唯一一件事是使用performance.mark().

我在这里错过了什么重要的东西吗？

Answer 1

您命名为Navigation Timing并找到了User Timing withperformance.mark()但错过了Resource Timing API。这三个都是Performance Timing API的一部分。

Navigation Timing测量主页或应用程序。Resource Timing API类似，但它是为每个异步加载的资源提供的，以使它们与导航时间相关。

想一想：异步加载的文件没有 DOM 可运行！这意味着资源计时中缺少 dom-properties。但开始部分与导航计时相同：

作为 Performance Timing API 最重要的属性的startTime怎么样？每个异步调用都有自己的！startTime用于0文档，ms>0用于 Javascript 文件和资源。

startTime是第一个记录的时间戳 - 度量的起源。它标志着浏览器第一次开始加载资源的过程。在对资源进行计时时，资源计时startTime与fetchStart或redirectStart（如果不为零）相同。

CSS 或图像等资源既没有 dom 也没有执行，但具有扩展名的资源执行 Javascript，因此正如您已经发现.js的那样，可能存在用户计时。performance.mark()

• NavigationTimingAPI 可以用于异步调用吗？

Yes 和 No. Resource Timing 会自动获得与 Navigation Timing 相关的标记，从而进行非常有用的比较。所以是的 - 但不是：测量 index.html（导航）和测量异步调用（资源）是不一样的：
更改performance.getEntriesByType("navigation")为performance.getEntriesByType("resource").

Answer 2

我在这里错过了显而易见的事情。

每个XMLHTTPRequest具有所有适用详细信息的内容都可以作为PerformanceResourceTiming对象自动提供

performance
  .getElementsByType("resource")
  .filter(function(x) { 
    return x.initiatorType === "xmlhttprequest";
  });

我只是在查看performance.timing对象（实际上是唯一无法通过 获得的东西performance.getElementsByType()）。