performance.getEntries获取资源顺序问题

背景

在使用 performance.getEntries 统计性能指标时，之前一直没有关注过数组中资源排序的顺序。由于所有的资源都是异步加载的，那么他里面的性能数据是按照请求发起的时间排序，还是按照结束的时间排序呢？

代码测试

假设有两个接口 /api1 和 /api2，前端按先后顺序依次发起 /api1 和 /api2，同时后端保证 /api2 先于 /api1 返回，观察 performance.getEntries 中记录的日志顺序：

axios.get("/api1");
setTimeout(() => {
  axios.get("/api2");
}, 200);

后端 express 代码：

app.use("/api1", (req, res) => {
  setTimeout(() => {
    res.send("/api1");
  }, 10000);
});

app.use("/api2", (req, res) => {
  setTimeout(() => {
    res.send("/api2");
  }, 200);
});

从浏览器调试工具中看到接口返回的顺序入预期所示：

此时通过 performance 获取到的数据为 /api1 在前， /api2 在后：

说明 performance 中是以请求发起的时机进行排序。

那么如果 /api1 还未返回的时候获取又会是什么样的结果呢？

当我们在 api1 还未返回的时候调用 performance.getEntries，拿到的数据如下：

发现 /api1 的数据并未出现在列表中。

结论

performance.getEntries 中的资源性能数据是以资源请求发起时间排序的，但是在这次请求资源结束前并不会记录进去，直到请求结束后才会“插入”到数组中合适的位置。