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;// onload时,触发times方法
HTML5的学习--performance获取加载时间的工具的更多相关文章
- 通过chrome浏览器分析网页加载时间
今天趁着下班的时间看了下chrome浏览器的网页加载时间分析工具和相关文档,简单写点儿东西记录一下. 以百度首页加载为例,分析下一张图片1.jgp(就是背景图)的加载时间 看右侧的Timing标签,从 ...
- selenium学习笔记11——driver.get(url) 页面加载时间太长
在执行自动化测试用例过程中,发现因为网络慢或其他原因导致driver.get(url) 时,页面一直在加载,页面没有加载完成就不会去继续执行下面的动作,但是实际上需要操作的元素已经加载出来了. 解决方 ...
- selenium学习笔记——driver.get(url) 页面加载时间太长
# 两个同时设置才行 # 实现效果:加载状态停止,进行代码下一步操作 driver.set_page_load_timeout(10) driver.set_script_timeout(10) # ...
- 利用Navigation Timing测量页面加载时间
最近在看一本名为<web性能实践日志>的书籍,其中第十三章"网络计时"中介绍了一种比较新的计算页面各部分加载时间方法,这也是W3C Web性能工作小组正在做的事情,接下 ...
- selenium加载时间过长
为了获取网站js渲染后的html,需要利用selenium加载网站,但是会出现加载时间过长的现象,因此可以限制其加载时间以及强制关掉加载: # !/usr/bin/python3.4 # -*- co ...
- 深入java虚拟机学习 -- 类的加载机制(续)
昨晚写 深入java虚拟机学习 -- 类的加载机制 都到1点半了,由于第二天还要工作,没有将上篇文章中的demo讲解写出来,今天抽时间补上昨晚的例子讲解. 这里我先把昨天的两份代码贴过来,重新看下: ...
- 我是如何将页面加载时间从6S降到2S的?
写在前面 生活在信息爆炸的今天,我们每天不得不面对和过滤海量的信息--无疑是焦躁和浮动的,这就意味着用户对你站点投入的时间可能是及其吝啬的(当然有一些刚需站点除外). 如何给用户提供迅速的响应就显得十 ...
- Selenium WebDriver- 指定页面加载时间
#encoding=utf-8 import unittest import time from selenium import webdriver from selenium.webdriver i ...
- creator 2.0版本对于preloadScene函数获取加载进度
有时候,当我们场景上挂载的资源过多时,我们使用cc.director.loadScene切换场景时会等一段时间才会切换过去,这对游戏的体验是相当不好的.所以我们可以使用cc.director.prel ...
随机推荐
- dom解析xml
<?xml version="1.0" encoding="UTF-8"?><ShowList> <Movie> < ...
- poj 3621 二分+spfa判负环
http://poj.org/problem?id=3621 求一个环的{点权和}除以{边权和},使得那个环在所有环中{点权和}除以{边权和}最大. 0/1整数划分问题 令在一个环里,点权为v[i], ...
- NSData与其它类型的转换
NSString转换成NSData对象 NSData *xmlData = [@"testdata" dataUsingEncoding:NSUTF8StringEncoding] ...
- (转)将win7电脑无线网变身WiFi热点,让手机、笔记本共享上网
将win7电脑变身WiFi热点,让手机.笔记本共享上网 功能:开启windows 7的隐藏功能:虚拟WiFi和SoftAP(即虚拟无线AP),就可以让电脑变成无线路由器,实现共享上网,节省网费和路由器 ...
- springmvc和struts2的差别
springmvc和struts2的区别相关内容 1.spring mvc的入口是servlet,而struts2是filter filter功能:用户可以改变一个request和修改一个resp ...
- rhel 5.8下静默安装oracle11gr2
1.图形界面下录制脚本如下: #-------------------------------------------------------------------------------# Do ...
- javascript event兼容性随笔
一.前言 function ConvertEvent(e, element) { var event = e || window.event; var resultEvent = { event: e ...
- 深入理解openstack网络架构(2)----Basic Use Cases
原文地址: https://blogs.oracle.com/ronen/entry/diving_into_openstack_network_architecture1 译文转自: http:// ...
- 即时通信系统中如何实现:全局系统通知,并与Web后台集成?【低调赠送:QQ高仿版GGTalk 5.1 最新源码】
像QQ这样的即时通信软件,时不时就会从桌面的右下角弹出一个小窗口,或是显示一个广告.或是一个新闻.或是一个公告等.在这里,我们将其统称为“全局系统通知”.很多使用GGTalk的朋友都建议我加上一个类似 ...
- 分享google的技能的11个级别,大家看看自己到哪个级别了?
you are unfamiliar with the subject area. you can read / understand the most fundamental aspects of ...