博客
关于我
强烈建议你试试无所不能的chatGPT,快点击我
HTML5的学习--performance获取加载时间的工具
阅读量:4572 次
发布时间:2019-06-08

本文共 2044 字,大约阅读时间需要 6 分钟。

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

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

关于performance的详细内容可以查看 

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

GitHub上的地址是:

只在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方法

 

转载于:https://www.cnblogs.com/CraryPrimitiveMan/p/3817527.html

你可能感兴趣的文章
145-PHP 使用<<<和HTML混编(一)
查看>>
栈的顺序存储结构以及实现
查看>>
【python】-- Socket粘包问题 ,解决粘包的几种方法、socket文件下载,md5值检验
查看>>
2016-09-12
查看>>
CDHD驱动器——ServoStudio配置高创伺服速度模式不转
查看>>
完整版本的停车场管理系统源代码带服务端+手机android客户端
查看>>
【UOJ 92】有向图的强联通分量
查看>>
bzoj 1192
查看>>
Windows10/Servers 2016的TrustedInstaller权限获取(及乱改System后救砖
查看>>
关于mysql转移数据库时没有导出sql脚本的情况下,如何导入数据到新的数据库中...
查看>>
链表逆序
查看>>
[zz]链表倒序
查看>>
简单易用的图像解码库介绍 —— stb_image
查看>>
【漏洞复现】永恒之蓝 ms17-010 漏洞利用 攻击手法
查看>>
HTML标签(二)
查看>>
在weblogic下运行Python脚本
查看>>
短信开发技术总结--协议篇
查看>>
HashMap实现原理分析
查看>>
私有类方法
查看>>
java网络编程Socket通信详解
查看>>