# Performance API

By [xiaoxm](https://paragraph.com/@xiaoxm) · 2022-05-22

---

`Performance` 是一个浏览器全局对象，提供了一组 API 用于编程式地获取程序在某些节点的性能数据。它包含一组高精度时间定义，以及配套的相关方法。可以直接在浏览器控制台打印`window.performance` 结果如下

    // 获取 performance 数据
    var performance = {
        // memory 是非标准属性，只在 Chrome 有
        // 我有多少内存
        memory: {
            usedJSHeapSize:  16100000, // JS 对象（包括V8引擎内部对象）占用的内存，一定小于 totalJSHeapSize
            totalJSHeapSize: 35100000, // 可使用的内存
            jsHeapSizeLimit: 793000000 // 内存大小限制
        },
    
        // 我从哪里来？
        navigation: {
            redirectCount: 0, // 如果有重定向的话，页面通过几次重定向跳转而来
            type: 0           // 0   即 TYPE_NAVIGATENEXT 正常进入的页面（非刷新、非重定向等）
                              // 1   即 TYPE_RELOAD       通过 window.location.reload() 刷新的页面
                              // 2   即 TYPE_BACK_FORWARD 通过浏览器的前进后退按钮进入的页面（历史记录）
                              // 255 即 TYPE_UNDEFINED    非以上方式进入的页面
        },
    //  核心时间相关
        timing: {
            // 在同一个浏览器上下文中，前一个网页（与当前页面不一定同域）unload 的时间戳，如果无前一个网页 unload ，则与 fetchStart 值相等
            navigationStart: 1441112691935,
    
            // 前一个网页（与当前页面同域）unload 的时间戳，如果无前一个网页 unload 或者前一个网页与当前页面不同域，则值为 0
            unloadEventStart: 0,
    
            // 和 unloadEventStart 相对应，返回前一个网页 unload 事件绑定的回调函数执行完毕的时间戳
            unloadEventEnd: 0,
    
            // 第一个 HTTP 重定向发生时的时间。有跳转且是同域名内的重定向才算，否则值为 0
            redirectStart: 0,
    
            // 最后一个 HTTP 重定向完成时的时间。有跳转且是同域名内部的重定向才算，否则值为 0
            redirectEnd: 0,
    
            // 浏览器准备好使用 HTTP 请求抓取文档的时间，这发生在检查本地缓存之前
            fetchStart: 1441112692155,
    
            // DNS 域名查询开始的时间，如果使用了本地缓存（即无 DNS 查询）或持久连接，则与 fetchStart 值相等
            domainLookupStart: 1441112692155,
    
            // DNS 域名查询完成的时间，如果使用了本地缓存（即无 DNS 查询）或持久连接，则与 fetchStart 值相等
            domainLookupEnd: 1441112692155,
    
            // HTTP（TCP） 开始建立连接的时间，如果是持久连接，则与 fetchStart 值相等
            // 注意如果在传输层发生了错误且重新建立连接，则这里显示的是新建立的连接开始的时间
            connectStart: 1441112692155,
    
            // HTTP（TCP） 完成建立连接的时间（完成握手），如果是持久连接，则与 fetchStart 值相等
            // 注意如果在传输层发生了错误且重新建立连接，则这里显示的是新建立的连接完成的时间
            // 注意这里握手结束，包括安全连接建立完成、SOCKS 授权通过
            connectEnd: 1441112692155,
    
            // HTTPS 连接开始的时间，如果不是安全连接，则值为 0
            secureConnectionStart: 0,
    
            // HTTP 请求读取真实文档开始的时间（完成建立连接），包括从本地读取缓存
            // 连接错误重连时，这里显示的也是新建立连接的时间
            requestStart: 1441112692158,
    
            // HTTP 开始接收响应的时间（获取到第一个字节），包括从本地读取缓存
            responseStart: 1441112692686,
    
            // HTTP 响应全部接收完成的时间（获取到最后一个字节），包括从本地读取缓存
            responseEnd: 1441112692687,
    
            // 开始解析渲染 DOM 树的时间，此时 Document.readyState 变为 loading，并将抛出 readystatechange 相关事件
            domLoading: 1441112692690,
    
            // 完成解析 DOM 树的时间，Document.readyState 变为 interactive，并将抛出 readystatechange 相关事件
            // 注意只是 DOM 树解析完成，这时候并没有开始加载网页内的资源
            domInteractive: 1441112693093,
    
            // DOM 解析完成后，网页内资源加载开始的时间
            // 在 DOMContentLoaded 事件抛出前发生
            domContentLoadedEventStart: 1441112693093,
    
            // DOM 解析完成后，网页内资源加载完成的时间（如 JS 脚本加载执行完毕）
            domContentLoadedEventEnd: 1441112693101,
    
            // DOM 树解析完成，且资源也准备就绪的时间，Document.readyState 变为 complete，并将抛出 readystatechange 相关事件
            domComplete: 1441112693214,
    
            // load 事件发送给文档，也即 load 回调函数开始执行的时间
            // 注意如果没有绑定 load 事件，值为 0
            loadEventStart: 1441112693214,
    
            // load 事件的回调函数执行完毕的时间
            loadEventEnd: 1441112693215
    
            // 按照字母排序
            // connectEnd: 1441112692155,
            // connectStart: 1441112692155,
            // domComplete: 1441112693214,
            // domContentLoadedEventEnd: 1441112693101,
            // domContentLoadedEventStart: 1441112693093,
            // domInteractive: 1441112693093,
            // domLoading: 1441112692690,
            // domainLookupEnd: 1441112692155,
            // domainLookupStart: 1441112692155,
            // fetchStart: 1441112692155,
            // loadEventEnd: 1441112693215,
            // loadEventStart: 1441112693214,
            // navigationStart: 1441112691935,
            // redirectEnd: 0,
            // redirectStart: 0,
            // requestStart: 1441112692158,
            // responseEnd: 1441112692687,
            // responseStart: 1441112692686,
            // secureConnectionStart: 0,
            // unloadEventEnd: 0,
            // unloadEventStart: 0
        }
    }
    

![image](https://storage.googleapis.com/papyrus_images/6656e1617187b5e16784e82d3b4154bb6f8fd6d9eb113bb1696f7942266fc57d.webp)

image

### 使用 `performance.timing` 信息简单计算出网页性能数据

*   重定向耗时 = redirectEnd - redirectStart;
    
*   DNS查询耗时 = domainLookupEnd - domainLookupStart;
    
*   TCP链接耗时 = connectEnd - connectStart;
    
*   SSL 建连 = connectEnd - secureConnectionStart; SSL 连接时间
    
*   HTTP请求耗时 = responseEnd - responseStart; 内容传输，Response阶段耗时
    
*   解析dom树耗时 = domComplete - domInteractive; Dom解析时间
    
*   白屏时间 = responseStart - navigationStart;
    
*   DOMready时间 = domContentLoadedEventEnd - navigationStart;
    
*   onload时间 = loadEventEnd - navigationStart;
    
*   FP = responseStart - navigationStart
    

### 使用`performance.getEntries()`获取所有资源请求的时间数据

获取所有资源请求的时间数据,这个函数返回一个按 startTime 排序的对象数组

如下为控制面板输出

    performance.getEntries()
    
    0: PerformanceNavigationTiming {unloadEventStart: 0, unloadEventEnd: 0, domInteractive: 1070.2000000476837, domContentLoadedEventStart: 1235, domContentLoadedEventEnd: 1236, …}
    1: PerformanceResourceTiming {initiatorType: 'link', nextHopProtocol: 'h2', workerStart: 0, redirectStart: 0, redirectEnd: 0, …}
    2: PerformanceResourceTiming {initiatorType: 'link', nextHopProtocol: 'h2', workerStart: 0, redirectStart: 0, redirectEnd: 0, …}
    3: PerformanceResourceTiming {initiatorType: 'link', nextHopProtocol: 'h2', workerStart: 0, redirectStart: 0, redirectEnd: 0, …}
    4: PerformanceResourceTiming {initiatorType: 'link', nextHopProtocol: 'h2', workerStart: 0, redirectStart: 0, redirectEnd: 0, …}
    5: PerformanceResourceTiming {initiatorType: 'script', nextHopProtocol: 'h2', workerStart: 0, redirectStart: 0, redirectEnd: 0, …}
    6: PerformanceResourceTiming {initiatorType: 'link', nextHopProtocol: 'h2', workerStart: 0, redirectStart: 0, redirectEnd: 0, …}
    7: PerformanceResourceTiming {initiatorType: 'link', nextHopProtocol: 'h2', workerStart: 0, redirectStart: 0, redirectEnd: 0, …}
    8: PerformanceResourceTiming {initiatorType: 'link', nextHopProtocol: 'h2', workerStart: 0, redirectStart: 0, redirectEnd: 0, …}
    9: PerformanceResourceTiming {initiatorType: 'link', nextHopProtocol: 'h2', workerStart: 0, redirectStart: 0, redirectEnd: 0, …}
    10: PerformanceResourceTiming {initiatorType: 'link', nextHopProtocol: 'h2', workerStart: 0, redirectStart: 0, redirectEnd: 0, …}
    11: PerformanceResourceTiming {initiatorType: 'link', nextHopProtocol: 'h2', workerStart: 0, redirectStart: 0, redirectEnd: 0, …}
    12: PerformanceResourceTiming {initiatorType: 'link', nextHopProtocol: 'h2', workerStart: 0, redirectStart: 0, redirectEnd: 0, …}
    13: PerformanceResourceTiming
    connectEnd: 814.3000000715256
    connectStart: 814.3000000715256
    decodedBodySize: 3234
    domainLookupEnd: 814.3000000715256
    domainLookupStart: 814.3000000715256
    duration: 39.59999990463257
    encodedBodySize: 3234
    entryType: "resource"
    fetchStart: 814.3000000715256
    initiatorType: "img"
    name: "https://lf3-cdn-tos.bytescm.com/obj/static/xitu_juejin_web/e08da34488b114bd4c665ba2fa520a31.svg"
    nextHopProtocol: "h2"
    redirectEnd: 0
    redirectStart: 0
    requestStart: 849
    responseEnd: 853.8999999761581
    responseStart: 852.8999999761581
    secureConnectionStart: 814.3000000715256
    serverTiming: (2) [PerformanceServerTiming, PerformanceServerTiming]
    startTime: 814.3000000715256
    transferSize: 0
    workerStart: 0
    [[Prototype]]: PerformanceResourceTiming
    ...
    

### 使用`performance.getEntriesByName(name)`获取特定名称的时间数据

如通过 `getEntriesByName(name)` 提供的 api 去获取 FCP 数据

    FCP = performance.getEntriesByName("first-contentful-paint")[0].startTime
    

### 使用`performance.now()`精确计算程序执行时间

`performance.now`方法返回当前网页自从`performance.timing.navigationStart`到当前时间之间的微秒数（毫秒的千分之一）。也就是说，它的精度可以达到 100 万分之一秒。 那么我们可以通过两次调用 最后计算出 js 某种操作的精确耗时

    const start = performance.now();
    doTasks(); // 这里是耗时操作
    const end = performance.now();
    console.log("耗时：" + (end - start) + "微秒。");
    

### 使用`performance.mark`以及`performance.measure`手动测量性能

自定义搜集性能数据指标 做前端的性能监控系统 那么这两个 api 是非常给力的

请参考[这里](https://developer.mozilla.org/zh-CN/docs/Web/API/Performance/mark)

#### `mark`

这里打了四个点，用来标识两个任务的开始时间和结束时间，两个任务分别采用 Promise 推迟执行。

doTask 模拟推迟行为。

    const doTask = (ms) => new Promise((resolve, reject) => {
      setTimeout(() => {
        resolve()
      }, ms);
    })
    async function run() {
      performance.mark("startTask1");
      await doTask(1000); // Some developer code
      performance.mark("endTask1");
    
      performance.mark("startTask2");
      await doTask(2000); // Some developer code
      performance.mark("endTask2");
    
      // Log them out
      const entries = performance.getEntriesByType("mark");
      for (const entry of entries) {
        console.table(entry.toJSON());
      }
    }
    run();
    

![image](https://storage.googleapis.com/papyrus_images/58ceb9f88f0a47782b07f1f0186c4dc89d10d0ee8ffeb0a6d6d1e8866ca7061c.webp)

image

#### `measure`

用于在两个 \*\*点 （即上文提到的打点） \*\* 之间测量时间 举个 例子：需要测量一个 for 循环花费的时间。

    const observer = new PerformanceObserver(list => {
      list.getEntries().forEach((entry) => {
        console.table(entry);
      });
    });
    
    observer.observe({
      entryTypes: ['measure']
    });
    performance.mark('cal-start');
    // 模拟耗时任务
    for(let i = 0; i < 10000; i ++) {
    
    }
    performance.mark('cal-end');
    // 该 measure 的名字：my-cal
    // measure 开始的时间点：cal-start
    // measure 结束的时间点：cal-end
    performance.measure('my-cal', 'cal-start', 'cal-end')
    

![image](https://storage.googleapis.com/papyrus_images/1664ebc24933d0eb381f1510dae92f79d0b08b7b0f45bd58b546eab7e2cec497.webp)

image

---

*Originally published on [xiaoxm](https://paragraph.com/@xiaoxm/performance-api)*