初探performance.timing API

浏览器新提供的performance接口精确的告诉咱们当访问一个网站页面时当前网页每一个处理阶段的精确时间(timestamp)，以方便咱们进行前端分析。

它是浏览器的直接实现，比以前在网页中用js设置Date.time或者cookie来分析网页时间上要精确不少。

如下是w3c提供的performance.timing各阶段api图

暂时的缺点：

 

Navigation Timing stops at the window.onload event

现代的网站不少是在onload以后再发触发更多的异步请求，而navigation Timing统计却只在window.onload以后就不统计了 。

为何不在全部的网络请求完成后统计timing呢？

由于要考虑到有些网页有轮询或者长连接的状况。因此状况就复杂了，w3c还在草案阶段。若是你够牛想出好的解决方案，也能够直接发邮件到w3c去，贡献你的一份力量。

为方便查看统计值，本身写了一个简单的统计表插件

performanceTracer

performance API 耗时统计

统计点：

readyStart = timing.fetchStart - timing.navigationStart;
redirectTime = timing.redirectEnd  - timing.redirectStart;
appcacheTime = timing.domainLookupStart  - timing.fetchStart;
unloadEventTime = timing.unloadEventEnd - timing.unloadEventStart;
lookupDomainTime = timing.domainLookupEnd - timing.domainLookupStart;
connectTime = timing.connectEnd - timing.connectStart;
requestTime = timing.responseEnd - timing.requestStart;
initDomTreeTime = timing.domInteractive - timing.responseEnd;
domReadyTime = timing.domComplete - timing.domInteractive; //过早获取时 domComplete有时会是0
loadEventTime = timing.loadEventEnd - timing.loadEventStart;
loadTime = timing.loadEventEnd - timing.navigationStart;//过早获取时 loadEventEnd有时会是0

结果：

console.log('准备新页面时间耗时: ' + readyStart);
console.log('redirect 重定向耗时: ' + redirectTime);
console.log('Appcache 耗时: ' + appcacheTime);
console.log('unload 前文档耗时: ' + unloadEventTime);
console.log('DNS 查询耗时: ' + lookupDomainTime);
console.log('TCP链接耗时: ' + connectTime);
console.log('request请求耗时: ' + requestTime);
console.log('请求完毕至DOM加载: ' + initDomTreeTime);
console.log('解释dom树耗时: ' + domReadyTime);
console.log('load事件耗时: ' + loadEventTime);
console.log('从开始至load总耗时: ' + loadTime);

 

使用方法：

能够直接在html底部引入performance-min.js

或下载chrome 插件.crx包，

 

注意事项

因为window.performance.timing还处于w3c完善过程当中，当你的网站有异步请求时，请在全部异步请求完成后再点击chrome上的插件按钮，以确保数据正确

 

效果图：

 

=======================================================================

js及chrome插件下载地址

github: https://github.com/willian12345/performanceTracer

 

关于performance timing 未完善功能老外的讨论：http://www.stevesouders.com/blog/2012/10/30/qa-nav-timing-and-post-onload-requests/

==========================

 

 

bug修复 ：

现chrome下能够安装插件了，mac与win下已测试，其它系统上应该也能够安装使用了。

==========================

转载处请注明：博客园偷饭猫willian12345@126.com