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
}
}
重定向耗时 = 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
获取所有资源请求的时间数据,这个函数返回一个按 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
...
如通过 getEntriesByName(name) 提供的 api 去获取 FCP 数据
FCP = performance.getEntriesByName("first-contentful-paint")[0].startTime
performance.now方法返回当前网页自从performance.timing.navigationStart到当前时间之间的微秒数（毫秒的千分之一）。也就是说，它的精度可以达到 100 万分之一秒。 那么我们可以通过两次调用 最后计算出 js 某种操作的精确耗时
const start = performance.now();
doTasks(); // 这里是耗时操作
const end = performance.now();
console.log("耗时：" + (end - start) + "微秒。");
自定义搜集性能数据指标 做前端的性能监控系统 那么这两个 api 是非常给力的
请参考这里
这里打了四个点，用来标识两个任务的开始时间和结束时间，两个任务分别采用 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();
用于在两个 **点 （即上文提到的打点） ** 之间测量时间 举个 例子：需要测量一个 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')
