NavigationTimingAPI 可以用于异步调用吗？答案

【问题标题】：Can the NavigationTimingAPI be used on asynchronous calls?NavigationTimingAPI 可以用于异步调用吗？
【发布时间】：2019-05-17 02:59:11
【问题描述】：

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

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

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

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

到目前为止，我唯一发现的是使用 performance.mark() 设置测量点。

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

【问题讨论】：

标签： javascript navigation-timing-api resource-timing-api

【解决方案1】：

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

Navigation Timing 衡量主页或应用程序。 Resource Timing API 类似，但它是为每个异步加载的资源提供的，以便根据导航时间对它们进行比较。

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

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

startTime 是第一个记录的时间戳 - 度量的来源。它标志着浏览器第一次开始加载资源的过程。在资源定时startTime is same as fetchStart or redirectStart (if not zero)时资源定时。

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

NavigationTimingAPI 能否用于异步调用？

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

【讨论】：

【解决方案2】：

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

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

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

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

【讨论】：