前段时间因为项目需要获取页面加载的时间,就去看了下HTML5中的performane。

可以用其获得页面详细的加载时间。

关于performance的详细内容可以查看 http://www.cnblogs.com/CraryPrimitiveMan/p/3795086.html

之后用performane写了一个小工具,用来获取页面详细的加载时间。

GitHub上的地址是:https://github.com/CraryPrimitiveMan/performance-tool

只在chrome中通过了测试。

将times.js引入想应的HTML中,打开console(按F12),刷新一下页面就可以看到详细的加载时间。 也可以在JS中使用times()方法调用。

其运行结果如下图

源码及注释如下

var times = function() {
var timing = performance.timing;
var loadTime = timing.loadEventEnd - timing.navigationStart;//过早获取时,loadEventEnd有时会是0
if(loadTime <= 0) {
// 未加载完,延迟200ms后继续times方法,直到成功
setTimeout(function(){
times();
}, 200);
return;
}
var readyStart = timing.fetchStart - timing.navigationStart;
var redirectTime = timing.redirectEnd - timing.redirectStart;
var appcacheTime = timing.domainLookupStart - timing.fetchStart;
var unloadEventTime = timing.unloadEventEnd - timing.unloadEventStart;
var lookupDomainTime = timing.domainLookupEnd - timing.domainLookupStart;
var connectTime = timing.connectEnd - timing.connectStart;
var requestTime = timing.responseEnd - timing.requestStart;
var initDomTreeTime = timing.domInteractive - timing.responseEnd;
var domReadyTime = timing.domComplete - timing.domInteractive; //过早获取时,domComplete有时会是0
var loadEventTime = timing.loadEventEnd - timing.loadEventStart; // 为console.table方法准备对象,包含耗时的描述和消耗的时间
var allTimes = [
{ "描述": "准备新页面时间耗时", "时间(ms)": readyStart },
{ "描述": "redirect 重定向耗时", "时间(ms)": redirectTime },
{ "描述": "Appcache 耗时", "时间(ms)": appcacheTime },
{ "描述": "unload 前文档耗时", "时间(ms)": unloadEventTime },
{ "描述": "DNS 查询耗时", "时间(ms)": lookupDomainTime },
{ "描述": "TCP连接耗时", "时间(ms)": connectTime },
{ "描述": "request请求耗时", "时间(ms)": requestTime },
{ "描述": "请求完毕至DOM加载", "时间(ms)": initDomTreeTime },
{ "描述": "解释dom树耗时", "时间(ms)": domReadyTime },
{ "描述": "load事件耗时", "时间(ms)": loadEventTime },
{ "描述": "从开始至load总耗时", "时间(ms)": loadTime }
];
console.table(allTimes);
}
window.onload = times;// onload时,触发times方法

最新文章

  1. de4dot3.14更新文件打包下载
  2. linux下动态链接库解决方案(二)
  3. webstorm node 3000端口被占用
  4. win64
  5. android 编译代码注意事项
  6. 用JQuery仿造QQ头像裁剪功能
  7. HDU5823 : color II
  8. Topcoder SRM 619 DIv2 500 --又是耻辱的一题
  9. TYVJ P1062 合并傻子 Label:环状dp
  10. Windows7部署WordPress傻瓜式教程(IIS7.5+MySQL+PHP+WordPress)
  11. Linux 查看系统版本及位数
  12. kernel笔记:TCP参数
  13. 所闻所获5:关于iOS的证书
  14. 订单处理(c#实现)
  15. 预加载(图片,css ,js)
  16. 算法题:int 数组中 只有一个是id 只出现一次 其他都出现2次 怎么找出只出现一次的id
  17. Feign get接口传输对象引发一场追寻
  18. Event Recommendation Engine Challenge分步解析第六步
  19. ASP.NET Core Cookie-based认证实现
  20. C#实现基于ffmpeg加虹软的人脸识别

热门文章

  1. OPC的理解Open Packaging Conventions
  2. C++多态(二)——函数重载(overloading)和操作符重载
  3. iOS一些关于日历的问题
  4. IO-01. 表格输出(5)
  5. ActionBar的使用
  6. jquery ajax post 中文乱码解决
  7. SQL入门经典(五) 之键和约束
  8. 微信公共平台开发-(.net实现)1--成为开发者
  9. TypeScript - Classes
  10. leveldb源码学习系列