首页 > 代码库 > HTML5的学习--performance获取加载时间的工具
HTML5的学习--performance获取加载时间的工具
前段时间因为项目需要获取页面加载的时间，就去看了下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;// onl oad时，触发times方法
声明：以上内容来自用户投稿及互联网公开渠道收集整理发布，本网站不拥有所有权，未作人工编辑处理，也不承担相关法律责任，若内容有误或涉及侵权可进行投诉： 投诉/举报 工作人员会在5个工作日内联系你，一经查实，本站将立刻删除涉嫌侵权内容。