[转] Performance_js中计算网站性能监控利器

1.Performance方法

Performance提供的方法能够灵活使用，获取到页面加载等标记的耗时状况。

performance.now()    //返回当前到页面打开时刻的耗时，精确到千分之一毫秒 performance.mark('worker_installed') //创建测速标记 performance.clearMarks() //清除标记 performance.getEntries() //对网页发起的全部HTTP请求耗时信息统计后，以数组方式返回 

 

2.Performance属性

Performance.timing属性对象提供了浏览器从打开网页到加载完成之间各个节点的耗时数据，包括重定向开始、DNS查询、浏览器响应数据、DOM解析等相关节点。经过组合计算咱们能够的出咱们所需的各个阶段的耗时数据，从而进行分析。

navigationStart：浏览器窗口的前一个网页关闭时发生unload事件时的Unix时间戳，属于最前的测量时间点。 unloadEventStart：前网页与当前网页同属一个域名时，返回前一个网页的unload事件发生时的Unix时间戳。 unloadEventEnd：前网页与当前网页同属一个域名时，返回前一个网页unload事件的回调函数结束时的Unix时间戳。 redirectStart：返回第一个HTTP跳转开始时的Unix时间戳。 redirectEnd：返回最后一个HTTP跳转结束时的Unix时间戳。 fetchStart：返回浏览器准备使用HTTP请求读取文档等资源时的Unix时间戳，在网页查询本地缓存以前发生。 domainLookupStart：返回域名查询开始时的Unix时间戳。若是使用持久链接，或者信息是从本地缓存获取的，则返回值等同于fetchStart属性的值。 domainLookupEnd：返回域名查询结束时的Unix毫秒时间戳。若是使用持久链接，或者信息是从本地缓存获取的，则返回值等同于fetchStart属性的值。 connectStart：返回HTTP请求开始向服务器发送时的Unix毫秒时间戳。若是使用持久链接（persistent connection），则返回值等同于fetchStart属性的值。 connectEnd：返回浏览器与服务器之间的链接创建时的Unix毫秒时间戳。若是创建的是持久链接，则返回值等同于fetchStart属性的值。链接创建指的是全部握手和认证过程所有结束。 secureConnectionStart：返回浏览器与服务器开始安全连接的握手时的Unix毫秒时间戳。若是当前网页不要求安全链接，则返回0。 requestStart：返回浏览器向服务器发出HTTP请求时（或开始读取本地缓存时）的Unix毫秒时间戳。 responseStart：返回浏览器从服务器收到（或从本地缓存读取）第一个字节时的Unix毫秒时间戳。 responseEnd：返回浏览器从服务器收到（或从本地缓存读取）最后一个字节时（若是在此以前HTTP链接已经关闭，则返回关闭时）的Unix毫秒时间戳。 domLoading：返回当前网页DOM结构开始解析时（即Document.readyState属性变为“loading”、相应的readystatechange事件触发时）的Unix毫秒时间戳。 domInteractive：返回当前网页DOM结构结束解析、开始加载内嵌资源时（即Document.readyState属性变为“interactive”、相应的readystatechange事件触发时）的Unix毫秒时间戳。 domContentLoadedEventStart：返回当前网页DOMContentLoaded事件发生时（即DOM结构解析完毕、全部脚本开始运行时）的Unix毫秒时间戳。 domContentLoadedEventEnd：返回当前网页全部须要执行的脚本执行完成时的Unix毫秒时间戳。 domComplete：返回当前网页DOM结构生成时（即Document.readyState属性变为“complete”，以及相应的readystatechange事件发生时）的Unix毫秒时间戳。 loadEventStart：返回当前网页load事件的回调函数开始时的Unix毫秒时间戳。若是该事件尚未发生，返回0。 loadEventEnd：返回当前网页load事件的回调函数运行结束时的Unix毫秒时间戳。若是该事件尚未发生，返回0。 

Performance.navigation属性对象提供了浏览器的一些行为信息。

Performance.navigation.type    //经过整数值表示网页从何加载 //0：网页经过点击连接、地址栏输入、表单提交、脚本操做等方式加载 //1：网页经过“从新加载”按钮或者location.reload()方法加载 //2：网页经过“前进”或“后退”按钮加载 //255：其余来源的加载 Performance.navigation.redirectCount //页面重定向次数 

Performance.memory属性对象提供了浏览器的内存使用状况。

 

3.实例代码

// 计算加载时间 function getPerformanceTiming() { var performance = window.performance; if (!performance) { // 当前浏览器不支持 console.log('你的浏览器不支持 performance 接口'); return; } var t = performance.timing; var times = {}; //【重要】页面加载完成的时间 //【缘由】这几乎表明了用户等待页面可用的时间 times.loadPage = t.loadEventEnd - t.navigationStart; //【重要】解析 DOM 树结构的时间 //【缘由】检讨下你的 DOM 树嵌套是否是太多了！ times.domReady = t.domComplete - t.responseEnd; //【重要】重定向的时间 //【缘由】拒绝重定向！好比，http://example.com/ 就不应写成 http://example.com times.redirect = t.redirectEnd - t.redirectStart; //【重要】DNS 查询时间 //【缘由】DNS 预加载作了么？页面内是否是使用了太多不一样的域名致使域名查询的时间太长？ // 可以使用 HTML5 Prefetch 预查询 DNS ，见：[HTML5 prefetch](http://segmentfault.com/a/1190000000633364) times.lookupDomain = t.domainLookupEnd - t.domainLookupStart; //【重要】读取页面第一个字节的时间 //【缘由】这能够理解为用户拿到你的资源占用的时间，加异地机房了么，加CDN 处理了么？加带宽了么？加 CPU 运算速度了么？ // TTFB 即 Time To First Byte 的意思 // 维基百科：https://en.wikipedia.org/wiki/Time_To_First_Byte times.ttfb = t.responseStart - t.navigationStart; //【重要】内容加载完成的时间 //【缘由】页面内容通过 gzip 压缩了么，静态资源 css/js 等压缩了么？ times.request = t.responseEnd - t.requestStart; //【重要】执行 onload 回调函数的时间 //【缘由】是否太多没必要要的操做都放到 onload 回调函数里执行了，考虑过延迟加载、按需加载的策略么？ times.loadEvent = t.loadEventEnd - t.loadEventStart; // DNS 缓存时间 times.appcache = t.domainLookupStart - t.fetchStart; // 卸载页面的时间 times.unloadEvent = t.unloadEventEnd - t.unloadEventStart; // TCP 创建链接完成握手的时间 times.connect = t.connectEnd - t.connectStart; return times; }

 

4.总结

1.对于网页的测速上报需求，能够经过对Performance.timing对象的属性排列组合，计算出业务须要的测速数据。

2.对于网页的性能监测需求，能够经过对Performance.memory对象进行分析，得出内存使用状况等数据。

3.对于页面的其余业务监测需求，能够经过Performance提供的其余方法进行灵活使用，计算出业务所需数据。