开启掘金成长之旅！这是我参与「掘金日新计划 · 12 月更文挑战」的第17天，点击查看活动详情
前端性能量化？
要量化性能，我们首先要确定一个量化指标，那么我们前端一般使用什么指标来完成量化呢？内存？速度？
其实都不是，前端最主要的量化指标是时间。
所谓的性能统计，就是在合适的时机，打上合适的时间戳，或者暴露出当前时间戳。然后通过时间戳之间的差值，得出一个耗时时间。这个耗时时间就可以反映出我们页面的相关性能。
通常在开发过程中我们可以使用浏览器的performance来快速获取各种性能相关的时间戳差值
performance提供了很多API
User Timing API：用户自己定义在代码中通过调用 performance.mark（key）方法定义的时间点。
Navigation Timing API：资源请求的api
Resource Timing API：它里面包含的是我们从请求开始，到整个页面的完全显示的各个阶段的时间点，包含了以下：
| key值 | value值得解释 |
|---|---|
| navigationStart | 当前浏览器窗口的前一个网页关闭，发生unload事件时的时间戳。如果没有前一个网页，就等于fetchStart（也就是输入URL开始，第一步就是卸载上个页面） |
| redirectStart | 第一次重定向开始时的时间戳，如果没有重定向，或者上次重定向不是同源的。则为0 |
| redirectEnd | 最后一次重定向完成，也就是Http响应的最后一个字节返回时的时间戳。如果没有重定向，或者上次重定向不是同源的。则为0 |
| fetchStart | 浏览器准备通过HTTP请求去获取页面的时间戳。在检查应用缓存之前发生。 |
| domainLookupStart | 域名查询开始时的时间戳。如果使用持久连接，或者从本地缓存获取信息的，等同于fetchStart |
| domainLookupEnd | 域名查询结束时的时间戳。如果使用持久连接，或者从本地缓存获取信息的，等同于fetchStart |
| connectStart | HTTP请求开始向服务器发送时的时间戳，如果是持久连接，则等同于fetchStart。 |
| connectEnd | 浏览器与服务器之间的连接建立时的时间戳，连接建立指的是所有握手和认证过程全部结束 |
| requestStart | 浏览器向服务器发出HTTP请求时（或开始读取本地缓存时）的时间戳 |
| responseEnd | 浏览器从服务器收到（或从本地缓存读取）最后一个字节时（如果在此之前HTTP连接已经关闭，则返回关闭时）的时间戳 |
| responseStart | 浏览器从服务器收到（或从本地缓存读取）第一个字节时的时间戳。 |
| domLoading | 当前网页DOM结构开始解析时,也就是document.readyState属性变为“loading”、并且相应的readystatechange事件触发时的时间戳 |
| domInteractive | 当前网页DOM结构结束解析 |
| domContentLoadedEventStart | 当前网页DOMContentLoaded事件发生时，也就是DOM结构解析完毕、所有脚本开始运行时的时间戳 |
| domContentLoadedEventEnd | 当前网页DOMContentLoaded事件发生时，也就是DOM结构解析完毕、所有脚本运行完成时的时间戳 |
| domComplete | 当前网页DOM结构生成时，也就是Document.readyState属性变为“complete”, |
| loadEventStart | 当前网页load事件的回调函数开始时的时间戳。如果该事件还没有发生，返回0 |
| loadEventEnd | 当前网页load事件的回调函数结束时的时间戳。如果该事件还没有发生，返回0。 |
PerformanceObserver.observe()：指定监测的 entry types 的集合。 当 performance entry 被记录并且是指定的 entryTypes 之一的时候，性能观察者对象的回调函数会被调用。
在有了上面这些属性之后，我们就可以实现一些简单的性能统计。
