HTML5 Performance
简介
performance是html5的新特性之一,通过它,页面的开发者们可以非常精确的统计到自己页面的表现情况,从而有针对性的进行优化,提升用户体验。
下面是小姐姐对performance相关API的学习总结,一起上车吧~
performance.timing
返回一个PerformanceTiming
对象,用来获取完整的页面加载信息。
是时候祭出这张图了:
我们会比较关注的几个时间段及其耗时的计算方法如下:
- DNS解析:
timing.domainLookupEnd - timing.domainLookupStart
- 建立连接:
timing.connectEnd - timing.connectStart
- 发送请求:
timing.responseStart - timing.requestStart
- 接收请求:
timing.responseEnd - timing.responseStart
- 解析DOM树:
timing.domInteractive - timing.domLoading
- 页面加载完成:
timing.domContentLoadedEventStart - timing.domInteractive
- DOMContentLoaded事件耗时:
timing.domContentLoadedEventEnd - timing.domContentLoadedEventStart
- DOM加载完成:
timing.domComplete - timing.domContentLoadedEventEnd
- DOMLoad事件耗时:
timing.loadEventEnd - timing.loadEventStart
performance.now
返回一个DOMHighResTimeStamp
对象,获取从timing.navigationStart
开始到调用该方法的时间,精确到千分之五毫秒(5微秒)。
下面是该方法的使用场景之一:通过计算代码块的起始位置以及结束位置performance.now()
的差值,来获取一个比较精确的代码执行时间。
看代码:
var startTime, endTime;
startTime = window.performance.now();
doSomething();
endTime = window.performance.now();
console.log(endTime - startTime);
资源性能数据
performance
提供若干API允许我们对页面中加载的资源进行性能分析。
performance.getEntries
获取一组当前页面已经加载的资源PerformanceEntry
对象。接收一个可选的参数options进行过滤,options支持的属性有name
,entryType
,initiatorType
。
var entries = window.performance.getEntries();
返回值如下图所示:
name
,根据entryType
不同,该值有不同含义。entryType
为resource
时,name
表示资源的路径。entryType
,取值有:resource
,mark
,measure
等,详情戳这里initiatorType
,初始化该资源的资源类型:- 初始化资源是一个`Element`时,取值为节点的`localName`,通过`element.localName`获取。
- 初始化资源是一个`css`文件时,取值为`css`。
- 初始化资源是一个`XMLHttpRequest`时,取值为`xmlhttprequest`。
- 初始化资源是一个`PerformanceNavigationTiming`对象时,取值为空字符串。startTime
,一个DOMHighResTimeStamp
对象,开始获取该资源的时间。duration
,一个DOMHighResTimeStamp
对象,获取该资源消耗时长。
performance.getEntriesByName
根据参数name
,type
获取一组当前页面已经加载的资源数据。name
的取值对应到资源数据中的name
字段,type
取值对应到资源数据中的entryType
字段。
var entries = window.performance.getEntriesByName(name, type);
performance.getEntriesByType
根据参数type
获取一组当前页面已经加载的资源数据。type
取值对应到资源数据中的entryType
字段。
var entries = window.performance.getEntriesByType(type);
performance.setResourceTimingBufferSize
设置当前页面可缓存的最大资源数据个数,entryType
为resource
的资源数据个数。超出时,清空所有entryType
为resource
的资源数据。
window.performance.setResourceTimingBufferSize(maxSize);
performance.onresourcetimingbufferfull
entryType
为resource
的资源数量超出设置值的时候会触发该事件。
performance.clearResourceTimings
移除缓存中所有entryType
为resource
的资源数据。
自定义计时接口
performance.mark
创建一个DOMHighResTimeStamp
保存在资源缓存数据中,可通过performance.getEntries()
等相关接口获取。
entryType
为字符串mark
name
为创建时设置的值startTime
为调用mark
时的时间duration
为0,因为mark
没有时长
window.performance.mark(name)
performance.clearMarks
移除缓存中所有entryType
为mark
的资源数据。
performance.measure
计算两个mark
之间的时长,创建一个DOMHighResTimeStamp
保存在资源缓存数据中,可通过performance.getEntries()
等相关接口获取。
entryType
为字符串measure
name
为创建时设置的值startTime
为调用measure
时的时间duration
为两个mark之间的时长
window.performance.measure(name, startMark, endMark);
performance.clearMeasures
移除缓存中所有entryType
为measure
的资源数据。
performance.navigation
返回一个PerformanceNavigation
类型的只读对象:
type
,进入页面的方式:- `TYPE_NAVIGATENEXT(0)`,通过点击链接,书签,在浏览器地址栏输入地址,或者通过脚本跳转
- `TYPE_RELOAD(1)`,通过点击页面内的刷新按钮,或者通过`Location.reload()`方法
- `TYPE_BACK_FORWARD(2)`,通过点击页面内的前进后退按钮
- `TYPE_RESERVED(255)`,其他方式redirectCount
,表示到达此页面之前经过多少次重定向。
performance.toJSON
返回一个包含performance
对象所有属性的JSON
对象。
THE END
以上就是全部内容啦,有意见或者建议欢迎积极留言哦,笔芯~
HTML5 Performance的更多相关文章
- 2018年html5入门到精通教程电子书百度云盘下载共22本
名称 查看 <HTML5启动和运行>(HTML5.Up.and.Running)扫描版[PDF] 下载 <Pro HTML5 Performance>(Pro HTML5 Pe ...
- (转) [it-ebooks]电子书列表
[it-ebooks]电子书列表 [2014]: Learning Objective-C by Developing iPhone Games || Leverage Xcode and Obj ...
- 使用Javascript监控前端相关数据
项目开发完成外发后,没有一个监控系统,我们很难了解到发布出去的代码在用户机器上执行是否正确,所以需要建立前端代码性能相关的监控系统. 所以我们需要做以下的一些模块: 一.收集脚本执行错误 functi ...
- Web性能优化系列
web性能优化之重要,这里并不打算赘述.本系列课程将带领大家认识.熟悉.深刻体会并且懂得如果去为不同的站点做性能优化 同时,本系列将还会穿插浏览器兼容性相关问题的解决方案,因为在我看来,兼容性同样属于 ...
- HTML5的学习--performance获取加载时间的工具
前段时间因为项目需要获取页面加载的时间,就去看了下HTML5中的performane. 可以用其获得页面详细的加载时间. 关于performance的详细内容可以查看 http://www.cnblo ...
- HTML5的学习--performance
HTML5提供的performance接口精确的告诉我们当访问一个网站页面时当前网页每个处理阶段的精确时间(timestamp),以方便我们进行前端分析. 它是浏览器的直接实现,比在网页中用js设置D ...
- HTML5 学习总结(一)——HTML5概要与新增标签
一.HTML5概要 1.1.为什么需要HTML5 HTML4陈旧不能满足日益发展的互联网需要,特别是移动互联网.为了增强浏览器功能Flash被广泛使用,但安全与稳定堪忧,不适合在移动端使用(耗电.触摸 ...
- 基于HTML5实现3D热图Heatmap应用
Heatmap热图通过众多数据点信息,汇聚成直观可视化颜色效果,热图已广泛被应用于气象预报.医疗成像.机房温度监控等行业,甚至应用于竞技体育领域的数据分析. http://www.hightopo.c ...
- HTML5 学习笔记(一)——HTML5概要与新增标签
目录 一.HTML5概要 1.1.为什么需要HTML5 1.2.什么是HTML5 1.3.HTML5现状及浏览器支持 1.4.HTML5特性 1.5.HTML5优点与缺点 1.5.1.优点 1.5.2 ...
随机推荐
- List<T>去重复
代码 class ListDistinctDemo { static void Main(string[] args) { List<Person> personList = new Li ...
- 极速体验|使用 Erda 微服务观测接入 Jaeger Trace
在大型网站系统设计中,随着分布式架构,特别是微服务架构的流行,我们将系统解耦成更小的单元,通过不断的添加新的.小的模块或者重用已经有的模块来构建复杂的系统.随着模块的不断增多,一次请求可能会涉及到十几 ...
- MATLAB菜鸟入门笔记【作图章】
1.函数标签[legend] http://blog.csdn.net/wangcj625/article/details/6287735/
- 舒服,给Spring贡献一波源码。
你好呀,我是歪歪. 这周我在 Spring 的 github 上闲逛的时候,一个 issues 引起了我的兴趣. 这篇文章,是我顺着这个 issues 往下写,始于它,但是不止于它: https:// ...
- svn服务支持网页显示并增加在线预览功能,支持视频在线播放
1.svn服务器支持网页显示 VisualSVN Server是一个非常不错的SVN Server程序,方便,直观,用户管理也异常方便.不过,它本身并没有提供在线修改密码的功能.由于在实际使用过程中, ...
- 《手把手教你》系列基础篇(七十七)-java+ selenium自动化测试-框架设计基础-TestNG依赖测试- 上篇(详解教程)
1.简介 今天主要是讲解和分享:TestNG中一个类中有多个测试方法的时候,多个测试方法的执行顺序或者依赖关系的问题.如果不用dependsOnMethods,testNG会自动根据@Test方法名称 ...
- WPF中的事件及冒泡事件和隧道事件的区别
WPF中的事件及冒泡事件和隧道事件的区别 冒泡事件表示事件从元素树向上到达根元素.这样您就可以在源元素的上方层级对象处理事件.例如,您可向嵌入的 Grid 元素附加一个 Button.Click 处理 ...
- OpenCV基础_二
阈值和平滑处理 cv2.threshold()二值化函数 ret,thresh = cv2.threshold(src, thresh, maxval, type[, dst]) 参数 src:所要进 ...
- springboot通过maven下载依赖失败解决
公司直接用不了内网遇到的好的坑.导入网上的springboot项目的启动入口一致有报错,如:Cannot resolve symbol 'SpringApplication' maven配置设置都做了 ...
- ITerm让MAC终端更加灵活高效
一.ITerm2简介 1.安装 iTerm2 是一款完全免费的,专为 Mac OS 用户打造的命令行应用.直接在官网上http://iterm2.com/ 下载并安装即可. 2.配置 设置ITerm为 ...