Performance API不完全使用指北

使用浏览器的DevTools来评估web应用性能是很有用的，但要复现现实世界的使用情况并不容易。因为人们在不同地点使用不同的设备、浏览器和网络，都会有不同的体验。

Performance API介绍

Performance API使用一个缓冲区，在你的网页生命周期的确定节点上，在对象属性中记录类似DevTool的指标。这些节点包括：

1. 页面导航：记录页面加载重定向、连接、握手、DOM事件等等。
2. 资源加载：记录资源加载，比如图像、CSS、脚本以及Ajax调用。
3. 绘制指标：记录浏览器渲染信息。
4. 自定义：记录任意的应用处理时间，来找到运行慢的函数。

所有的API都可以在客户端的JavaScript中使用，包括Web Workers。你可以用以下方法检测API支持情况：

if ('performance' in window) {
  // call Performance APIs
}

注意：尽管Safari实现了大部分的API，但Safari并不支持所有的方法。

自定义performance API也被复制到了：

• Node.js 内置performance_hook模块，以及
• Deno performance API，（使用它的脚本必须以 --allow-hrtime权限运行）。

Date()不够好吗

你可能已经看到过使用Date()函数来记录经过时间的例子。比如：

const start = new Date();

// ... run code ...

const elapsed = new Date() - start;

然而，Date()的计算被限制在接近的毫秒数，并且是基于系统时间。而系统时间可以在任何时候被操作系统更新。

Performance API使用独立的、高精度的定时器，其可以在几毫秒的时间内记录。它还提供其他方式无法记录的指标，如重定向和DNS查询时间。

记录性能指标

如果你可以在某处记录的话，在客户端代码中记录性能指标是非常有用的。你可以使用Fetch/XMLHttpRequest请求，或者使用Beacon API，来发送统计数据到服务端进行分析。

另外，大多数分析系统提供类似的事件API来记录时间。比如说，Google分析的User Timings API可以通过传递类别'pageload'、变量名'DOMready'和一个值，来记录DOMContentLoaded的时间：

const pageload = performance.getEntriesByType( 'navigation' )[];

ga('send', 'timing', 'pageload', 'DOMready', pageload.domContentLoadedEventStart);

这个例子使用了Page Navigation Timing API，那么就从这开始吧。

页面导航时间

在快速连接上测试你的网站，并不能代表用户体验。浏览器DevTools的NetWork标签允许你限制速度，但它不能模拟糟糕的或间歇性的信号。

Navigation Timing API将单独的PerformanceNavigationTiming对象放入到性能缓冲区中。它包含有关重定向、加载时间、文件大小、DOM事件等的信息。

通过运行以下代码来访问该对象：

const pagePerf = performance.getEntriesByType('navigation');

或者传递页面URL（window.location）到 getEntriesByName() 方法中，来访问该对象：

const pagePerf = performance.getEntriesByName(window.location);

两者都返回一个数组，该数组拥有一个具有只读属性的对象的单一元素。比如说：

[
  {
    name: "<https://site.com/>",
    initiatorType: "navigation",
    entryType: "navigation",
    initiatorType: "navigation",
    type: "navigate",
    nextHopProtocol: "h2",
    startTime: 
    ...
  }
]

该对象包含资源识别属性：