文章 网页代码

js输出网站加载耗时详细列表

首页 > 网页代码 > 正文

js输出网站加载耗时详细列表第3张插图
一个开源js,能够轻松输出网页加载耗时详情
把这段js加到head标签或者js文件中,之后在控制台就能看到所有的加载耗时,总耗时是相当准确的,其他的参考即可

<script> var times = function() { var timing = performance.timing; var loadTime = timing.loadEventEnd - timing.navigationStart;/*过早获取时,loadEventEnd有时会是0*/ if(loadTime <= 0) { 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;
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;
</script>
这篇文章最后更新于2022-5-16,已超过 1 年没有更新,如果文章内容或图片资源失效,请留言反馈,我们会及时处理,谢谢!
免责声明
本站提供的一切软件、教程和内容信息仅限用于学习和研究目的;不得将上述内容用于商业或者非法用途,否则,一切后果请用户自负。本站信息来自网络收集整理,如果您喜欢该程序和内容,请支持正版,购买注册,得到更好的正版服务。我们非常重视版权问题,如有侵权请邮件与我们联系处理。敬请谅解!
OPPO系手机领芒果TV会员月卡
« 上一篇 05月16日
百变鹏仔导航网静态HTML源码非常简洁好看
下一篇 » 05月16日
为了防止灌水评论,登录后即可评论!
注册登录

还没有评论,快来抢沙发吧!