HTML5的学习--performance获取加载时间的工具
2014-11-13 22:21
190 查看
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方法
相关文章推荐
- HTML5的学习--performance获取加载时间的工具
- 精确获取时间(QueryPerformanceCounter)
- 获取页面加载时间(转载修改)
- 开始学习HTML5所需要的技巧和工具
- 精确获取时间(QueryPerformanceCounter)
- 如何精确计算程序运行时间——精确获取时间(QueryPerformanceCounter)
- OctaGate SiteTimer-做页面加载时间测试的工具
- html5学习之视频标签和时间标签
- 精确获取时间(QueryPerformanceCounter)
- Python学习:时间处理工具--dateutil两个简单用法
- vc++ 精确获取时间(QueryPerformanceCounter)
- XPO学习一(获取数据库服务器时间)
- 精确获取时间(QueryPerformanceCounter)
- Optimizing DLL Load Time Performance(优化 DLL 加载时间性能)
- js基于html5中canvas的字模提取工具(附js生成声音的方式、获取系统支持字体方式、字模显示及其他)
- Java中Date时间获取与转化(随学习进度不断更新)
- C语言工具宏的小合集(包括获取程序编译日期和时间等)
- 获取页面加载时间(转载修改)
- UINX 网络编程学习(2)--简单的时间获取客户程序
- 学习备忘--获取当前日期时间(精确到毫秒)