前端监控包括性能、错误、轨迹、热点等，之前用过的也就百度统计hmjs，其它知道的也就badjs、fundebugjs、frontjs等。估计很多大公司都有自己编写的库。
今天学习一下前端性能监控的API-performance。随便打开一个网页，然后控制台打印一下这个performance，
memory：内存使用情况，是 Chrome 添加的一个非标准扩展，这个属性提供了一个可以获取到基本内存使用情况的对象。不应该使用这个非标准的 API：
totalJSHeapSize：可用的js内存大小，单位字节B
usedJSHeapSize：已经使用的内存大小，单位是字节B
jsHeapSizeLimit：内存大小限制，单位是字节B
navigation：在指定的时间段里发生的操作相关信息，包括页面是加载还是刷新、发生了多少次重定向等等。
type:如何导航到该页面，0通过链接点击，1刷新或者reload，2通过历史记录或者前进后退，255其它方式。
redirectCount：页面到达这个页面之前重定向了几次。
timeOrigin:是一个实验中的功能，兼容性不好，返回性能测量开始时的时间的高精度时间戳。
resourcetimingbufferfull：一个回调的 EventTarget，当触发 resourcetimingbufferfull 事件的时候会被调用。并不知道是做什么用的。
performance也有很多方法，什么clearMeasures、getEntries等，有十来个方法，我不理解这些方法的作用，就不解释了。
重点来了，timing这个字段，这个字段有页面相关的性能信息。
navigationStart：从同一个浏览器上下文的上一个文档卸载(unload)结束时的时间戳。如果没有上一个文档，这个值会和fetchStart相同。我试了几个打开方式，发现都不能和fetchStart相等。
unloadEventEnd：表示unload事件处理完成时的时间戳。如果没有上一个文档，这个值会返回0。
redirectStart ：表示第一个HTTP重定向开始时的时间戳。如果没有重定向，或者重定向中的一个不同源，这个值会返回0。
redirectEnd ：表示最后一个HTTP重定向完成时（也就是说是HTTP响应的最后一个比特直接被收到的时间）的时间戳。如果没有重定向，或者重定向中的一个不同源，这个值会返回0。
fetchStart ：表示浏览器准备好使用HTTP请求来获取文档的时间戳。这个时间点会在检查任何应用缓存之前。
domainLookupStart ：表示域名查询开始的时间戳。如果使用了持续连接或者这个信息存储到了缓存或者本地资源上，这个值将和 fetchStart一致。
domainLookupEnd ：表示域名查询结束的时间戳。如果使用了持续连接，或者这个信息存储到了缓存或者本地资源上，这个值和 fetchStart一致。
connectStart ：表示返回HTTP请求开始向服务器发送时的毫秒时间戳。如果使用持久连接，则返回值等同于fetchStart属性的值。
connectEnd ：表示返回浏览器与服务器之间的连接建立时的毫秒时间戳。如果建立的是持久连接，则返回值等同于fetchStart属性的值。连接建立指的是所有握手和认证过程全部结束。
secureConnectionStart ：表示返回浏览器与服务器开始安全链接的握手时的毫秒时间戳。如果当前网页不要求安全连接，则返回0。
requestStart ：表示返回浏览器向服务器发出HTTP请求时（或开始读取本地缓存时）的毫秒时间戳。
responseStart ：表示返回浏览器从服务器收到（或从本地缓存读取）第一个字节时的毫秒时间戳。如果传输层在开始请求之后失败并且连接被重开，该属性将会被数制成新的请求的相对应的发起时间。
responseEnd ：表示返回浏览器从服务器收到（或从本地缓存读取，或从本地资源读取）最后一个字节时（如果在此之前HTTP连接已经关闭，则返回关闭时）的毫秒时间戳。
domLoading ：表示返回当前网页DOM结构开始解析时的毫秒时间戳。
domInteractive ：表示返回当前网页DOM结构结束解析、开始加载内嵌资源时的毫秒时间戳。
domContentLoadedEventStart ：表示返回当解析器发送DOMContentLoaded 事件，即所有需要被执行的脚本已经被解析时的毫秒时间戳。
domContentLoadedEventEnd ：表示返回当所有需要立即执行的脚本已经被执行（不论执行顺序）时的毫秒时间戳。
domComplete ：表示返回当前文档解析完成被触发时的毫秒时间戳。
loadEventStart ：表示返回该文档下，load事件被发送时的毫秒时间戳。如果这个事件还未被发送，它的值将会是0。
loadEventEnd ：表示返回当load事件结束，即加载事件完成时的毫秒时间戳。如果这个事件还未被发送，或者尚未完成，它的值将会是0。
从网上盗了一张图，看的更容易理解：
[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-MXfvPGmg-1585211535920)(https://user-gold-cdn.xitu.io/2020/3/26/17115f6edc167174?w=1080&h=337&f=png&s=204734)]
这么多字段，就可以得到很多时间，比如：
DNS解析时间：domainLookupEnd - domainLookupStartTCP建立连接时间：connectEnd - connectStart白屏时间：responseStart - navigationStart
通过这个API，前端性能监控就变的简单了，具体要这么封装这么编写，也是不能那么简单就直接计算，而且受网络等外部因素，精确度也是个问题。
