# Performance API

**Published by:** [xiaoxm](https://paragraph.com/@xiaoxm/)
**Published on:** 2022-05-22
**URL:** https://paragraph.com/@xiaoxm/performance-api

## Content

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使用 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 是非常给力的 请参考这里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(); imagemeasure用于在两个 **点 （即上文提到的打点） ** 之间测量时间 举个 例子：需要测量一个 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

## Publication Information

- [xiaoxm](https://paragraph.com/@xiaoxm/): Publication homepage
- [All Posts](https://paragraph.com/@xiaoxm/): More posts from this publication
- [RSS Feed](https://api.paragraph.com/blogs/rss/@xiaoxm): Subscribe to updates