performance data via JavaScript

• JavaScript

JavaScript 的 performance 除了常用的 now / mark 之外，也提供了和页面加载相关的很多接口。通过调用这些接口，就可以很方便的收集页面加载的相关指标，方便了解不同用户的实际体验。

perfomance.getEntries 返回的数据，有三种类型：navigation，resource，paint。

其中，navigation 包含了 PerformanceNavigationTiming，里面记录了和页面导航相关的时间信息，比如 connection 的起始/结束时间等。可以通过下面的代码拿到完整的数据：

performance.getEntriesByType('navigation')[0].toJSON();
// output:
// connectEnd: xxx
// connectStart: xxx
// ...

resource 包含了所有的 PerformanceResourceTiming。每一个资源的请求，对应一个 PerformanceResourceTiming。例子：

performance.getEntriesByType('resource').forEach(({ name, duration }) => {
  console.log(`resource: ${name} use ${duration} milliseconds to load`);
  // output:
  // resource: https://xxxx use xxx milliseconds to load
  // ...
});

paint 包含了所有的 PerformancePaintTiming。一共有两个，分别是 first-paint 和 first-contentful-paint。例子：

performance.getEntriesByType('paint').forEach(({ name, startTime }) => {
  console.log(`name: ${name}, startTime: ${startTime}`);
  // output:
  // first-paint: xxxx
  // first-contentful-paint: xxx
});