使用浏览器的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: 
    ...
  }
]

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

注意：performanceServerTiming的name、description和duration等指标由服务器响应写入HTTPServer-Timing头部。

该对象包括相对于页面加载开始的以毫秒为单位的资源时间属性。通常情况下，时间会按照这个顺序来展示：

该对象包括以字节为单位的下载大小属性：

后，该对象包括进一步的导航和DOM事件属性（在Safari中不可用）：

在页面完全加载后记录页面加载指标的例子如下：

'performance' in window && window.addEventListener('load', () => {

  const
    pagePerf        = performance.getEntriesByName(window.location)[],
    pageDownload    = pagePerf.duration,
    pageDomComplete = pagePerf.domComplete;

});

页面资源时间

每当页面加载图片、字体、CSS文件、JavaScript文件等资产时，Resource Timing API将PerformanceResourceTiming对象放入性能缓冲区中，可以这么运行：

const resPerf = performance.getEntriesByType('resource');

这样会返回资源时间的对象数组。这些属性与上面显示的页面时间相同，但没有导航和DOM事件信息。

下面是返回结果的示例：

[
  {
    name: "<https://site.com/style.css>",
    entryType: "resource",
    initiatorType: "link",
    fetchStart: 150,
    duration: 300
    ...
  },
  {
    name: "<https://site.com/script.js>",
    entryType: "resource",
    initiatorType: "script",
    fetchStart: 302,
    duration: 112
    ...
  },
  ...
]

单一资源可以传递资源URL到.getEntriesByName()方法进行测试：

const resourceTime = performance.getEntriesByName('<https://site.com/style.css>');

这会返回单一元素的数组：

[
  {
    name: "<https://site.com/style.css>",
    entryType: "resource",
    initiatorType: "link",
    fetchStart: 150,
    duration: 300
    ...
  }
]

可以使用API来报告加载时间以及每个CSS文件解压后的大小：

// array of CSS files, load times, and file sizes
const css = performance.getEntriesByType('resource')
  .filter(r => r.initiatorType === 'link' && r.name.includes('.css'))
  .map(r => ({

      name: r.name,
      load: r.duration + 'ms',
      size: r.decodedBodySize + ' bytes'

  }));

CSS数组现在为每个CSS文件包含一个对象。比如：

[
  {
    name: "<https://site.com/main.css>",
    load: "155ms",
    size: "14304 bytes"
  },
  {
    name: "<https://site.com/grid.css>",
    load: "203ms",
    size: "5696 bytes"
  }
]

注意：load的大小为0表示该资源已经被缓存了。

至少有150个资源指标对象将被记录到性能缓冲区。你可以用.setResourceTimingBufferSize(N)方法定义一个指定数字。比如：

// record 500 resources
performance.setResourceTimingBufferSize(500);

现有的指标可以用.clearResourceTimings()方法清除。

浏览器绘制时间

First Contentful Paint (FCP)测量用户导航到你的页面后渲染内容所需的时间。Chrome的DevTool的Lighthouse标签展示了该指标。谷歌认为FCP时间少于两秒是好的，你的页面将比75%的页面展现的更快。

当发生以下两种情况时，Paint Timing API将两个记录也就是两个PerformancePaintTiming对象推入性能缓冲区：

• first-paint发生：浏览器绘制像素，以及
• first-contentful-paint发生：浏览器绘制DOM元素

当运行下面代码时，两个对象以数组形式返回：

const paintPerf = performance.getEntriesByType('paint');

返回结果示例：

[
  {
    "name": "first-paint",
    "entryType": "paint",
    "startTime": 125
  },
  {
    "name": "first-contentful-paint",
    "entryType": "paint",
    "startTime": 127
  }
]

startTime是相对于初始化页面加载的时间。

用户时间

Performance API可以用来为你自己的应用功能计时。所有的用户时间方法都可以在客户端的JavaScript、Web Workers、Deno和Node.js中使用。

注意，Node.js脚本必须加载Performance hooks（perf_hooks）模块。**

CommonJSrequire语法：

const { performance } = require('perf_hooks');

或者ESMimport语法：

import { performance } from 'perf_hooks';

简单的选择是[performance.now()](<https://developer.mozilla.org/docs/Web/API/Performance/now>)，其会从程序的生命周期开始，返回一个高精度时间戳。

你可以使用performance.now()作为简单的计时器。比如说：

const start = performance.now();

// ... run code ...

const elapsed = performance.now() - start;

注意，不标准的timeOrigin属性返回一个时间戳。可以用于Node.js和浏览器JavaScript，但不能用于IE和Safari。

当管理多个定时器时，performance.now()很快就变得不切实际。.mark()方法添加一个名为PerformanceMark object对象到性能缓冲区。比如说：

performance.mark('script:start');

performance.mark('p1:start');
// ... run process 1 ...
performance.mark('p1:end');

performance.mark('p2:start');
// ... run process 2 ...
performance.mark('p2:end');

performance.mark('script:end');

下列代码返回mark对象数组：

const marks = performance.getEntriesByType('mark');

数组里的对象拥有entryType、name和startTime属性：

[
  {
    entryType: "mark",
    name: "script:start",
    startTime: 100
  },
  {
    entryType: "mark",
    name: "p1:start",
    startTime: 200
  },
  {
    entryType: "mark",
    name: "p1:end",
    startTime: 300
  },
  ...
]

两个标记之间的时间可以用.measure()方法来计算。它传递一个测量名称，开始标记名称（或者null），以及结束标记名称（或者null）：

performance.measure('p1', 'p1:start', 'p1:end');
performance.measure('script', null, 'script:end');

每次调用都会向性能缓冲区推送一个带有计算持续时间的PerformanceMeasure对象。测量数组可以通过运行以下代码进行访问：

const measures = performance.getEntriesByType('measure');

返回示例：

[
  {
    entryType: "measure",
    name: "p1",
    startTime: 200,
    duration: 100
  },
  {

    entryType: "measure",
    name: "script",
    startTime: ,
    duration: 500
  }
]

标记或测量对象可以使用.getEntriesByName()方法按名称检索：

performance.getEntriesByName('p1');

其他方法：

• .getEntries()：返回所有性能条目的数组。
• .clearMarks([name])：清除指定名称的标记（不指定名称则清除所有标记）。
• .clearMeasures([name])：清除指定名称的测量（不指定名称则清除所有测量）。

PerformanceObserver可以监听缓冲区的更改，当指定对象出现时执行函数。观察者函数使用两个参数定义：

1. list：观察者条目
2. observer（可选）：观察者对象

function performanceHandler(list, observer) {

  list.getEntries().forEach(entry => {

    console.log(`name    : ${ entry.name }`);
    console.log(`type    : ${ entry.type }`);
    console.log(`duration: ${ entry.duration }`);

    // other code, e.g.
    // send data via an Ajax request

  });

}

该函数传递一个新的PerformanceObserver对象。.observe()方法设置可观察的entry*（一般来说是mark，measure或者resource）：

let observer = new PerformanceObserver(performanceHandler);
observer.observe({entry*: ['mark', 'measure']});

每当有新的标记或测量对象被推送到性能缓冲区，performanceHandler()函数就会运行。

总结

Performance API提供了一种方法来测量网站和应用程序的速度，这些设备是由不同地点的人在一系列连接上使用的实际设备。它使每个人都能轻松地整理出类似DevTool的指标，并识别潜在的瓶颈。