前端性能监控API-performance

前端监控包括性能、错误、轨迹、热点等，之前用过的也就百度统计hmjs，其它知道的也就badjs、fundebugjs、frontjs等。估计很多大公司都有自己编写的库。 今天学习一下前端性能监控的API-performance。随便打开一个网页，然后控制台打印一下这个performance， image 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。 从网上盗了一张图，看的更容易理解： image 这么多字段，就可以得到很多时间，比如： DNS解析时间：domainLookupEnd - domainLookupStartTCP建立连接时间：connectEnd - connectStart白屏时间：responseStart - navigationStart 通过这个API，前端性能监控就变的简单了，具体要这么封装这么编写，也是不能那么简单就直接计算，而且受网络等外部因素，精确度也是个问题。 image

本文章由javascript技术分享原创和收集